变形
transform [变形基础]
rotate() [旋转]
scale() [缩放]
translate() [位移]
skew() [倾斜]
matrix() [矩阵变形]
perspective [透视]
过渡
transition-property [过渡的CSS属性]
transition-duration [过渡时间]
transition-delay [延迟时间]
transition-timing-function [过渡效果]
动画
animation-name [动画名称]
animation-duration [动画时间]
animation-timing-function [播放方式]
animation-delay [开始播放时间]
animation-iteration-count [播放次数]
animation-direction [播放方向]
animation-fill-mode [播放后的状态]
animation-play-state [对象动画的状态]
关联属性
transform-origin [变形原点]
perspective-origin [透视原点]
backface-visibility [隐藏内容的背面]
transform-style [3D呈现]
animation-name [动画名称] - CSS3 动画参考手册 - 光年文档管理系统(Light Year Doc)
网站首页
animation-name [动画名称]
### 语法 ```css /*定义一个或多个动画名称。*/ animation-name: none | <identifier> [ , none | <identifier> ]*; ``` <table class="table"><thead><tr><th width="20%">语法项目</th><th>说明</th></tr></thead><tbody><tr><td>初始值</td><td>none</td></tr><tr><td>适用于</td><td>所有元素</td></tr><tr><td>可否继承</td><td>否</td></tr><tr><td>媒介</td><td>视觉</td></tr><tr><td>版本</td><td>CSS3.0</td></tr></tbody></table> ### 说明 检索或设置对象所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由`@keyframes`定义。 如果提供多个属性值,以逗号进行分隔。 #### 如何开始进行动画 `@keyframes`相当于一个命名空间,后面跟一个名词,如果在class中的`animation-name`定义了与之对应的name,那么就可以执行动画了。定义动画时,简单的动画可以直接使用关键字`from`和`to`,即从一种状态过渡到另一种状态:如: ```css @-webkit-keyframes demo{ from{left:0;} to{left:400px;} } ``` 复杂动画: ```css @-webkit-keyframes demo{ 0%{left:0;} 50%{left:200px;} 100%{left:400px;} } ``` 这里面的百分百有点像flash里帧的概念。表示设置某个时间段内任意时间点的样式。 ### 取值 `none`:不引用任何动画名称 `identifier`:定义一个或多个动画名称(`identifier`标识) ### 实例代码 <iframe src="http://example.itshubao.com/inexample/438.html" width="100%" height="250px" frameborder="0" scrolling="no"></iframe> ### 兼容性 <table class="table"><thead><tr><th class="ie" width="20%">IE</th><th class="firefox" width="20%">Firefox</th><th class="opera" width="20%">Opera</th><th class="safari" width="20%">Safari</th><th class="chrome" width="20%">Chrome</th></tr></thead><tbody><tr><td>IE 10+</td><td>Firefox 3.5+</td><td>目前暂无版本支持</td><td>Safari 10+</td><td>Chrome 2.0+</td></tr></tbody></table>
上一篇:
动画
下一篇:
animation-duration [动画时间]