CSS3运动轨迹动画

Html

Css

Js

    css3动画

.box { width:150px; height:100px; background:green; border-radius:5px; text-align:center; color:white; line-height:100px; animation:run 5s 1s ease infinite; } @keyframes run { 20% { transform:rotate(20deg); } 50% { transform:translateX(1200px) rotate(0deg); background:green; } 55% { transform:translateX(1200px) rotate(0deg); background:green; } 90% { transform:translateX(0px) rotate(-360deg); background:blueviolet; } 100% { transform:translateX(0px) rotate(-360deg); background:green; } }

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

animation：动画名称 动画执行时间 动画延迟时间 动画运动方式 动画执行次数

动画是否逆播 动画是否暂停执行 动画是否回到原来位置

animation-name设置动画名称

animation-duration 动画持续时间

animation-delay 动画延时时间-->

animation-timing-function 动画执行速度 linear（匀速）

运动方式：

linear 动画从头到尾的速度是相同的。

ease 默认。动画以低速开始，然后加快，在结束前变慢。-->

ease-in 动画以低速开始。

ease-out 动画以低速结束。

ease-in-out 动画以低速开始和结束。

执行次数

n：执行n次，infinite：无限次播放