<!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>Document</title>
<style>
.box {
background-color: cadetblue;
position:relative;
height: 150px;
width: 150px;
animation:mymove 1s infinite alternate;
-webkit-animation:boxmove 1s infinite alternate;
/* animation-direction:alternate; */
}
@keyframes boxmove {
from {left: 0;}
to {left: 1000px;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
animation: name duration timing-function delay iteration-count direction;
- *animation-name 绑定到选择器的 keyframe 名称
- *animation-duration 完成动画所花费的时间，以秒或毫秒计。
- animation-timing-function 完成动画速度曲线
- animation-delay 动画开始前的延迟
- *animation-iteration-count 动画执行次数 n | infinite(无限)
- animation-direction (alternate 轮流往返播放)
带 * 为必须加的字段， 需给 box加样式 position：relative
@keyframes boxmove {
0% {background-color: cadetblue; left: 0; top:0;}
25% {background-color: red; left: 500px;top:0;}
50% {background-color: blue; left: 500px; top:500px}
75% {background-color: blanchedalmond; left: 0;top: 500px;}
100% {background-color: cadetblue; left: 0; top:0; }
}
left: 0; 或者 top:0;等定位为0时也需定义，否则无动画效果，请尝试。
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
