animation 动画

Animation:动画

综合设置语法：animation: donghua 4s infinite;

分别设置：

/*动画*/

/*animation: donghua 5s;*/

 

/*动画的名称*/

animation-name: donghua;

 

/*一次动画所花费的时间*/

animation-duration: 3s;

 

/*动画的速度*/

animation-timing-function: linear;

 

/*动画延迟时间*/

animation-delay: 3s;

 

/*设置动画的次数*/

animation-iteration-count: 3;

 

/*设置动画的往返*/

animation-direction: alternate;

 

/*保留最后一刻状态*/

animation-fill-mode: forwards;

 

 

不同状态写在关键帧里

@keyframes donghua{
                0%{
                    transform: translate(0,0);
                }
                50%{
                    transform: translate(500px,0);
                }
                100%{
                    transform: translate(500px,500px);
                }
            }