animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>transition</title>
<style>
.demo{
width: 100px;
height: 100px;
position: absolute;
left: 0;
background: red;
animation: move 3s linear 1s backwards;
/* animation-name 执行动画的关键帧名
*animation-duration 动画执行时间
*animation-timing-function 过渡函数速率
*animation-delay 延迟时间
*animation-direction 运动方向
normal 默认值
reverse 方向播放
alternate 奇数次正向,偶数次反向
alternate-reverse 奇数次反向,偶数次正向
*animation-iteration-count 动画播放次数
n 播放次数
infinite无限次播放
*animation-fill-mode 动画开始之前和结束之后的操作
none 默认值,动画结束后返回初始帧(最原始的位置)
forwards 动画结束后停留在最后帧
backwards 应用动画样式时迅速应用动画的初始帧(迅速到动画初始帧keyframes设定的位置)
both 同时具有forwards和backwards的效果
*animation-play-state 动画播放状态
running 播放
paused 暂停
*/
}
@keyframes move{
0%{
left: 200px;
background: green;
}
100%{
left: 400px;
}
}
/* animation 动画会按照keyframes 关键帧里面指定的帧状态而过渡执行。0% - 100% 代表动画的时间过渡 */
/* 帧频中如果只有0% 和 100% 可以用form to 代替 */
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>