CSS3 animation详解

admin管理员组

文章数量:1794759

CSS3 animation详解

使用animation属性定义CSS3动画需要2步：（1）定义动画:使用动画之前，必须使用@keyframes规则定义动画 语法:0%表示动画的开始，100%表示动画的结束。0%和100%是必须的，不过在一个@keyframes规则中可以由多个百分比构成，每一个百分比都可以定义自身的CSS样式，从而形成一系列的动画效果。使用@keyframes规则时，如果仅仅只有0%和100%这两个百分比的话，这时0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。 @keyframes 动画名 {    0%{……}    20%{……}    ……    100%{……} }（2）调用动画:使用@keyframes规则定义的动画并不会自动执行，还需要使用animation-name属性来调用动画，之后动画才会生效。其实这就跟JavaScript的函数一样，首先必须定义函数，然后只有调用函数，函数才会执行生效。animation-name调用的动画名需要和@keyframes规则定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。动画相关属性：（1）animation-duration：用来设置动画的持续时间，也就是完成从0%到100%所使用的总时间。单位为秒（s）。（2）animation-timing-function：用来设置动画的播放方式，所谓的“播放方式”主要用来指定动画在播放时间内的速率。（3）animation-delay：用来定义动画播放的延迟时间。单位为秒（s）。（4）animation-iteration-count：用来定义动画的播放次数。属性默认值为1。也就是默认情况下，动画从开始到结束只播放一次。单位为正整数。（5）animation-direction：用来定义动画的播放方向。 normal:每次循环都向正方向播放（默认值） reverse:每次循环都向反方向播放 alternate:播放次数是奇数时，动画向原方向播放；播放次数是偶数时，动画向反方向播放（6）animation-play-state：用来定义动画的播放状态。 running:播放动画（默认值） paused:暂停动画（7）animation-fill-mode：用来定义在动画开始之前和动画结束之后发生的事情。 none 动画完成最后一帧时会反转到初始帧处（默认值） forwards 动画结束之后继续应用最后的关键帧位置 backwards 会在向元素应用动画样式时迅速应用动画的初始帧 both 元素动画同时具有forwards和backwards效果

本文标签： 详解animation