CSS3 animation 动画属性

@keyframes规定动画

animation                         所有动画属性的简写属性，除了animation-play-state属性。

animation-name                动画的名称 （必须的）

animation-duration            完成一共用的时间，默认是0s （必须的）

animation-timing-function   速度曲线，默认  ease    步长 steps（）

                                              linear                   匀速

                                              ease                    默认, 以低速开始，然后加快，在结束前变慢

                                              ease-in                动画以低速开始 ,  加速

                                              ease-out              动画以低速结束，减速

                                              ease-in-out          动画以低速开始和结束 ，先加速后减速

                                              steps（）            指定了时间函数中的间隔数量（步长）

animation-delay                      何时开始，默认  0s

animation-iteration-count       重复次数，默认  1次，  infinite 无限循环

animation-direction                来回播放，默认  normal 不倒回   alternate 逆播放

animation-fill-mode                动画结束状态， 默认 backwards  回到起始    forwards   保持

连写

animation：动画名称   持续时间        运动曲线         何时开始      播放次数              是否反方向     动画起始或者结束的状态；

animation：  name        duration     timing-funcion      delay       iteration-count          direction                fill-mode ;

animation:     name          1s                   ease               0s               infinite                 alternate                 forwards；

animation-play-state          鼠标放上运行或暂停，默认 running不暂停      pause  鼠标放上暂停

暂停动画：animation-play-state：puased；经常和 :hover 经过等其他配合使用