-
效果图:
GI5.gif xxx.html
<!DOCTYPE html>
<!--
animation-direction: normal|alternate;
normal 默认值。动画应该正常播放。 测试
alternate 动画应该轮流反向播放。
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.体会动画.html</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
/*调用动画*/ /*infinite 规定动画应该无限次播放。*/
/*animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向;*/
animation: move 3s ease 0s infinite alternate;
}
/*声明动画 keyframes(关键帧)*/
/*@keyframes 动画名称{}*/
@keyframes move{
from{
left: 0;
background-color: pink;
}
to{
left: 1000px;
background-color: yellow;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
