动画
一、动画
- 目标：使用animationt添加动画效果
- 作用：实现多个状态的变化，并且过程可控（重复播放、交替播放、暂停）
- css属性：animation
- 快捷键：an
1.1 动画属性
- 目标1：使用animation相关属性控制动画执行过程
- 目标2：使用steps实现逐帧动画
1.2 动画实现步骤
使用步骤：
1. 定义动画
- 写法：
1. @keyframes 动画名称 { from{} to{}}
2.👍: @keyframes 动画名称 { 0%{} 50%{} 100%{}}
3. 快捷键: @key
4. 区别：from to 只能定义两个状态的变化。百分比可以定义多个状态间的变化
推荐👍：常省略from 和 0%
2. 调用动画
-
写法：
1.复合属性：animation: 动画名称 持续时间 延迟时间 速度曲线 最后的状态 重复次数 执行方法
2.关键的单词：🔔
infinite 无限次数播放
alternate 交替播放
infinite 重复次数
linear 匀速播放
steps(N) 逐帧动画，又叫分步动画，常和精灵图配合做逐帧动画
forwards 停在最终的状态
paused 暂停，常和hover配合做暂停动画 -
✨注意事项：
1. 复合属性的位置可以任意调换
2. infinite （重复）和forward（停在最终状态）不能同时使用
3. 动画名称、动画时长不能省略。其它的都可以省略
4. 如果只有一个时间，表示动画时长；如果有两个时间，第一个表示（动画）持续时间，第二个代表延迟时间
/* 目标：添加动画，让宽度从200变大到800 */
.box {
width: 200px;
height: 100px;
background-color: skyblue;
/* 2. 使用动画 快捷an*/
/* 动画时间不能省略，否则跑不起来 */
animation: move 2s;
}
/* 1.定义动画 快捷键@key*/
/* 中文也能跑，但是不推荐 写法很low*/
@keyframes move {
/* 定义初始状态 */
from {
width: 200px;
}
/* 定义最终状态 */
to {
width: 800px;
background-color: pink;
}
}
- 效果：
注意：默认动画后自动回到初始状态
1.3 动画实现步骤-百分比写法
- 作用：可以定义多个状态的变化
- 取值：百分比是按时间长度取值： 0-100可以任意分配值
- 注意：
- 0%等同于from，代表初始状态
- 100%等同于to，代表最终状态
/* 目标：添加动画，让宽度从200*100 到 500*300，再到 800*500 */
/* 区别：1. from 到同只能定义两种状态，2. 百分比可以自定义多种状态 */
.box {
width: 200px;
height: 100px;
background-color: skyblue;
/*2. 使用动画 */
animation: move 3s;
}
/* 1.定义动画 */
@keyframes move {
/* 0&等同于from 代表初始状态 */
0% {
width: 200px;
height: 100px;
}
10% {
width: 300px;
height: 200px;
}
20% {
width: 500px;
height: 400px;
}
/* 百分比是按照时间长度取值的：0-100可以任意取值 */
50% {
width: 600px;
height: 100px;
}
/* 100% 等同于to 代表最终状态 */
100% {
width: 100px;
height: 50px;
}
}
1.4 使用动画的三个注意事项
- 注意事项：
1. 动画名称不能重复，否则会产生覆盖效果
2. 大部分的CSS属性都可以 使用动画
3. from与0%常常省略，代表从初始状态0%开始
注意事项：
1. 动画名称不能重复，佛否则会产生覆盖效果
2. 大部分的CSS属性都可以 使用动画
3. from与0%常常省略，代表从初始状态0%开始 -->
<style>
/* 目标：添加动画，让宽度从200变大到600 */
.box {
width: 200px;
height: 100px;
background-color: skyblue;
/* 2. 使用动画 快捷an*/
/* 动画时间不能省略，否则跑不起来 */
animation: move 2s;
}
/* 1.定义动画 快捷键@key*/
/* 中文也能跑，但是不推荐 */
@keyframes move {
/* 写法一 可以定义多种状态，取值0-100*/
0% {
width: 200px;
background-color: lime;
}
100% {
width: 300px;
background-color: orange;
}
/* 写法二 只能定义两种状态*/
/* 定义初始状态 初始状态一般可以省略*/
from {
width: 200px;
background-color: skyblue;
}
/* 定义最终状态 */
to {
width: 500px;
height: 200px;
background-color: pink;
border-radius: 50%;
}
}
1.5 animation复合属性
- ✨注意事项：
- 复合属性的位置可以任意调换
- 名称和持续事件，不可省略其它的都可以
- forwards 和 infinite不能同时使用
- 如果有两个时间，第一个代表持续时间，第二个代表延迟
.box {
width: 200px;
height: 100px;
background-color: skyblue;
/* 速度曲线：linear 代表匀速运动 */
/* steps(4) 代表分步变化 */
/* 延迟时间：默认立即开始动画，延迟时间代表，多少秒后开始动画 */
/* 重复次数：infinite 无限次数播放 */
/* 动画方向： alternate 动画执行到100后，再从100%执行到0%。 */
/* 最后的状态：forwards 停在最终的状态中 */
animation: move 4s steps(4);
/*
💥注意事项：
1. 复合属性的位置可以任意调换
2. 名称和持续事件，不可省略其它的都可以
3. forwards 和 infinite不能同时使用
4. 如果有两个时间，第一个代表持续时间，第二个代表延迟时间。如果只要一个时间，代表动画时长
*/
}
.box:hover {
animation-play-state: paused;
}
@keyframes move {
to {
background-color: pink;
border-radius: 50px;
width: 800px;
height: 500px;
}
}
1.6 精灵动画
注意：多个动画用同一个animation属性时，动画之间用逗号隔开即可
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 140px;
height: 140px;
background: url(./images/bg.png) 0 0;
/* 💥 多个动画用同一个animation，动画之间用逗号隔开即可 */
animation: move 1s steps(12) infinite, run 2s linear forwards;
}
@keyframes move {
to {
/* background-position: -1680px 680px; */
background-position: -1680px 0;
}
}
@keyframes run {
to {
transform: translateX(800px);
}
}
