语法讲解animation: name duration timing-function delay iteration-count direction;animation-name规定需要绑定到选择
语法讲解
animation: name duration timing-function delay iteration-count direction;animation-name 规定需要绑定到选择器的 keyframe 名称。。animation-duration 规定完成动画所花费的时间,以秒或毫秒计。animation-timing-function 规定动画的速度曲线。animation-delay 规定在动画开始之前的延迟。animation-iteration-count 规定动画应该播放的次数。animation-direction 规定是否应该轮流反向播放动画。来源: http://www.w3school.com.cn/cssref/pr_animation.asp
定义动画
@keyframes myMove { 0%{ opacity: 0; } 25%{ opacity: 0.5; } 50%{ opacity: 1; } 75%{ opacity: 0.5; } 100%{ opacity: 0; }}/*位移动画*/@keyframes lTor1 { from{left: -100px} to{left: 135px}}
引用动画
.myMove{ animation: myMove 2s ease-in-out; animation-iteration-count:1;}.lTor1{ position: absolute; animation: lTor1 2s ease-in-out; animation-iteration-count:1; left: 135px;}<body> <p class="myMove">渐显渐隐</p> <p class="lTor1">位移动画</p></body>
动画结束后如何让元素停在最后一帧,而不是回到原始状态在动画样式后面加上需要的样式就可以,因为样式是从前往后执行的