一、@keyframes 语法规则
在动画过程中,可以多次更改CSS样式。指定的变化发生时使用%,或关键字"from"和"to",这和0%到100%相同。0%是开头动画,100%是当动画完成。为了获得最佳的浏览器支持,应该始终定义为0%和100%的选择器。
@keyframes就是个动画,可以理解成多个transform组成的一个组。
语法:
@keyframes 动画名 {
from{ css1}
to{ css2 }
}
@keyframes 动画名{
0% {css1}
50% {css2}
100% {css3}
}
注:使用animation属性来控制动画的外观,还使用选择器绑定动画。
二、animation属性值
当调用这个动画时用animation ,animation由六个属性组成:
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔
animation-iteration-count 定义动画的播放次数
animation-direction 指定是否应该轮流反向播放动画
animation : 动画名 时间 速度曲线 开始的时候延迟 播放次数 轮流反向播放
举个例子看看:
让正方形从左上角向右上角再向右下角到左下角最后回到左上角,并且颜色也会随之变化
div{animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ } @keyframes mymove { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;} } @-webkit-keyframes mymove /* Safari and Chrome */ { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;} }
以上内容介绍了动画的使用方法,大家还需要自己动手,多敲敲,试试不同的效果!
以上就是CSS3中使用@keyframes创建动画,实例讲解的详细内容,更多请关注php中文网其它相关文章!
……