div{
animation: name duration timing-function delay iteration-count direction fill-mode;
}
<!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>Animation</title>
<style>
@keyframes move{
0%{
transform: translate(0);
}
15%{
transform: translate(100px,180px);
}
30%{
transform: translate(150px,0);
}
45%{
transform: translate(250px,180px);
}
60%{
transform:translate(300px,0);
}
75%{
transform: translate(480px,180px);
}
100%{
transform: translate(0);
}
}
div{
width: 500px;
height: 200px;
position: absolute;
z-index: 1;
border: 1px solid black;
}
span{
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
z-index: 100;
border-radius: 100%;
background-color: orange;
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation-name: move;
animation-duration: 10s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite; /*无限次,或者具体次数*/
animation-direction:normal; /*主要有normal(默认值)、alternate(在偶数次向前播放;在奇数次向反方向播放)*/
animation-fill-mode: none;/*none、forwards、backwords和both*/
animation-play-state: running; /*running和paused*/
}
</style>
</head>
<body>
<div></div>
<span></span>
</body>
</html>
注: animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。
属性值 | 效果 |
none | 默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处 |
forwards | 表示动画在结束后继续应用最后的关键帧的位置 |
backwards | 会在向元素应用动画样式时迅速应用动画的初始帧 |
both | 元素动画同时具有forwards和backwards效果 |