1.animation
animation是一个简写属性，用来设置做某个动画，属性内容包括：
animation-name: 规定动画的名字。这个动画名是由@keframes设置的，下面有关于@keyframes的详细内容。
animation-duration: 规定动画要执行的时间。参数为：一个数字n，单位为毫秒。
animation-timing-function: 规定动画的速度曲线。
其参数值为：
linear: 动画匀速执行
ease: 慢速开始，然后加速执行，最后以低速结束
ease-in: 以慢速开始
ease-out: 以慢速结束
ease-in-out: 以慢速开始和结束
animation-delay: 规定执行动画前要延迟的时间。单位为毫秒。
animation-interation-count: 规定动画执行的次数
参数1: number, 表示动画执行的次数
参数2： infinite, 表示一直执行下去,无限次数地执行
animation-direction: 规定动画执行的方向，是否应该轮流反向播放动画。
参数1： normal: 默认值，规定动画正常播放
参数2： alternate: 规定动画应该轮流反向播放。
2.@keyframes
@keyframes 规定将一套CSS样式转化为另一套CSS样式,可以通过from,to关键字来规定动画的变化，或者可使用多个百分比来详细地规定某个时间点应该做什么变化。若是用from于to,那么，from与to里的量应该是一致的，若是不一致，缺少的那个量表示默认值。
例子：
<!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>
@keyframes move{
0%{
width: 300px;
height: 200px;
}
25%{
height: 100px;
width: 300px;
}
50%{
width: 200px;
height: 100px;
}
75%{
height: 300px;
width: 200px;
}
100%{
width: 200px;
height: 200px;
}
}
div{
width: 300px;
height: 200px;
background-color: red;
animation:move 4s linear forwards;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.animation-fill-mode: 设置动画结束后的状态
参数1： none, 默认值，不设置对象动画之外的状态，DOM未进行动画前的状态
参数2： forward 设置对象状态为动画结束时的状态，100%或to时的状态
参数3： backwards 设置对象状态为动画开始时的状态
参数4： both 设置对象状态为动画结束或开始时的状态，结束时的状态优先。
4.onanimationend 表示animation动画播放结束
2433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
