动画和过渡类似，都可实现动态效果
不同点是过渡需要在某个属性发生变化时才会触发
动画可以自动触发
<!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>
</head>
<style>
#div1 {
background-color: chartreuse;
width: 200px;
height: 200px;
/* animation-name: 要对当前元素生效的关键帧，名字 */
animation-name: div1;
/* animation-duration:动画时间； */
animation-duration: 5s;
/* 动画延迟 */
/* animation-delay: 2s */
/* animation-iteration-count 动画执行次数
可选值：
次数可以设置
infinite 无限执行
*/
animation-iteration-count: infinite;
/* animation-direction
指定动画运行方向
可选值：
narmal 默认值 从 from 向 to运行 每次都是这样
reverse 从 to 向 from 运行每次都是这样
alternate 从 from向to运行 重复执行动画时反方向执行
alternate-reverse 从 to 向from运行 重复执行动画时反向执行
循环
animation-direction: alternate-reverse;
*/
/*
animation-play-state: 设置动画执行状态;
可选值：
running 默认值 动画执行
paused 动画暂停
*/
/*
animation-fill-mode：动画填充模式
可选值：
none 默认值 动画执行完毕元素回到原来的位置
forwards 动画执行完毕元素会停止在动画结束的位置
backwards 动画延时等待时，元素就会处于开始位置
both 结合了 forwards 和 backwards
*/
}
/* 设置动画效果需要设置一个关键帧，关键帧设置动画每一步 */
@keyframes div1 {
/* from表示动画开始的地方 */
from {
margin-top: 0px;
left: 0px;
}
to {
margin-top: 100px;
margin-left: 1000px;
}
/* to是动画结束的地方 */
}
</style>
<body>
<div id="div1"></div>
</body>
</html>
