今天写写怎么用animation属性做一些简单的动画效果
在CSS选择器中,使用animition动画属性,调用声明好的关键帧
首先声明一个动画(关键帧):
@keyframes name{ from{ } to{ }
}
@keyframes name{ 0%{ } 50%{ } 100%{ } }
阶段写法:
①每个阶段用百分比表示,从0%到100%
②起止必须设置,即0%和100%或者from和to
通常根据不同内核的浏览器要加上不同的前缀
比如:chrome、safari:@-webkit-keyframes
【Animation:缩写顺序】
Animation-name 动画名称(@keyframes 名称)
Animation-duration 动画持续时间
Animtaion-timing-function动画速度曲线 常选ease
Animtaion-delay 动画延迟时间
Animation-iteration-count 播放次数,默认为1,无限次Infinite
Animation-direction 设置对象动画在循环中是否反向运动 ( Alternate 逆向播放)
* animation-fill-mode 设置对象动画时间之外的状态(forwards: 停留在动画结束状态 backwards:停留在动画开始状态)
>>> 注意animation-name和animation-duration必须设置
>>> animation可以同时设置多个动画 动画之间用,分隔
animation:frame1 .3s,frame2 .5s……
举个例子:
新建一个div
<div class="div3"></div>
定义一个动画
@-webkit-keyframes myframe{ 0%{ background-color: #7FFFD4; } 25%{ background-color: coral; } 50%{ background-color: cornflowerblue; } 100%{ background-color: cyan; } }
给这个div加上一些属性
.div3{ 100px; height: 100px; background-color: #7FFFD4; -webkit-animation: myframe 5s ease infinite; }
这样就可以看到一个四个颜色不停变化的正方形了