在制作一些特效动画上会用到一些属性,今天来总结一下:
一、css3动画属性
以@keyframes(规定动画)为重点
1)animation-duration:规定动画完成一个周期所花费的时间(秒、毫秒)
2)animation-timing-function:规定动画的速度曲线(linear:速度相同;ease:以低速开始,加速,低速结束;ease-in、ease-out)——————重点:cubic-bezier:函数中的值(0-1),例:animation-timing-function:cubic-bezier(0,0,0.5,0.25);
3)animmation-delay:规定动画何时开始(秒、毫秒)
4)animation-iteration-count:规定动画播放的次数
5)animation-direction:规定是否在下一周期逆向播放
6)@keyframes
注意:keyframes有的浏览器不支持,需要例如(@-moz-keyframes/@-webkit-keyframes等)
<!DOCTYPE html>
<html>
<head>
<style>
div{