先看简单的效果图
这是源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: absolute;
border: 1px blue solid;
padding: 50px 200px;
}
#my-box {
position: absolute;
background: red;
top: 0;
left: 0;
width: 100px;
height: 100px;
animation: moveBox 2s linear infinite;
}
@keyframes moveBox {
from {
left: 0px
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<div class="box">
<div id="my-box">
我向右移动了
</div>
</div>
</body>
</html>
关键代码 animation: moveBox 2s linear infinite;
animation:
name(名称)
duration(需要多少秒完成)
timing-function(如何完成一个周期)
delay(启动前的延迟间隔)
iteration-count(播放次数)
direction(是否轮流反向播放动画)
fill-mode(当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。)
play-state(动画是否正在运行或已暂停)