前言
动画
animation是CSS3中新增的内容之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
1.制作动画过程
制作动画分为两步：先定义动画，再使用动画
1.1用keyframs定义动画
<style>
@keyframes 动画名称 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(100px);
}
}
</style>
0%是动画的开始，100%是动画的完成。这样的规则就是动画序列- 在
@keyframes中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果 - 动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数
- 请用百分比来规定变化发生的时间，或用关键词
“from”和“to”，等同于0%和100%
1.2使用动画
<style>
div {
width: 150px;
height: 150px;
background-color: lightblue;
margin: 50px auto;
animation-name: 动画名称;
animation-duration: 持续时间;
}
</style>
1.3示例
<head>
<style>
/* 1.用keyframs定义动画 */
@keyframes move {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(1000px);
}
}
/* 2.使用动画 */
div {
width: 150px;
height: 150px;
background-color: lightblue;
animation-name: move;
animation-duration: 2s;
}
/* 这个动画能实现一个盒子从上到下的移动 */
</style>
</head>
2.动画常用属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性，除了animation-play-state属性 |
| animation-name | 规定@keyframes动画的名称（必须要有） |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是0（必须要有） |
| animation-timing-function | 规定动画的速度曲线，默认是“ease” |
| animation-delay | 规定动画何时开始，默认是0 |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是“normal“,alternate逆播放 |
| animation-fill-mode | 规定动画结束后状态，保持forwards回到起始backwards |
3.动画简写属性
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
<style>
/* 动画名称 持续时间 运动曲线 开始时间 播放次数 是否反方向 */
animation: gif 5s linear 0.5s infinite alternate;
</style>
- 简写属性里面不包含
animation-play-state - 暂停动画：
animation-play-state: puased；经常和鼠标经过等其他配合使用 - 盒子动画结束后，停在结束位置：
animation-fill-mode : forwards
4.速度曲线细节
animation-timing-function：规定动画的速度曲线，默认是“ease”
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的（匀速） |
| ease | 动画以低速开始，然后加快，在结束前变慢（默认） |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| steps() | 指定了时间函数中的间隔数量（步长） |
3398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
