## 基本动画 绑定动画 ``` div{ animation:mymove 5s infinite; } ``` 定义动画 ``` @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} } ``` 基本属性 ``` div{ /*等待两秒然后开始动画*/ animation-delay:2s; -webkit-animation-delay:2s; /* Safari 和 Chrome */ 先执行一遍动画，然后再反向执行一遍动画 animation-direction:alternate; -webkit-animation-direction:alternate; 设置动画在多久内完成 animation-duration:2s; -webkit-animation-duration:2s; 移动物体并把它停在那里 animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */ 动画播放的次数 animation-iteration-count:3; -webkit-animation-iteration-count:3; /*Safari and Chrome*/ 动画的名称 animation-name:mymove; -webkit-animation-name:mymove; /* Safari 和 Chrome */ 暂停动画 animation-play-state:paused; -webkit-animation-play-state:paused; /* Safari 和 Chrome */ 定义动画的播放速度的 什么时候快慢 animation-timing-function:linear; -webkit-animation-timing-function:linear; /* linear动画从头到尾的速度是相同的。 ease默认。动画以低速开始，然后加快，在结束前变慢。 ease-in动画以低速开始。 ease-out动画以低速结束。 ease-in-out动画以低速开始和结束。 cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 */ } ```