CSS学习：CSS动画

Renascence.409

于 2024-08-02 14:05:52 发布

阅读量399

点赞数 4

分类专栏：前端学习文章标签： css 学习前端

本文链接：https://blog.csdn.net/qq_63898506/article/details/140867967

版权

前端学习专栏收录该内容

34 篇文章 0 订阅

订阅专栏

1、过渡（transition）

过渡（transition）可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。同时提供了一种在更改 CSS 属性时控制动画速度的方法。

1.1属性值

1.1.1 transition-property

transition-property 用于指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其他属性仍如通常那样瞬间变化。

/* 语法 */
transition-property: 过渡属性的名称
/* 取值 */
none: 没有过渡动画
all: 所有可被动画的属性都表现出过渡动画
属性名: 需要过渡属性的名称
/* 示例 */
transition-property: none;
transition-property: all;
transition-property: width, height, opacity, left, top;

1.1.2 transition-duration

transition-duration 用于设置属性以秒或毫秒为单位，指定过渡动画所需的时间。默认值为 0s，表示不出现过渡动画。

/* 语法 */
transition-duration: 动画所需的时间
/* 取值 */
<time>类型
/* 示例 */
transition-duration: 3s;
transition-duration: 1s 2s 3s;
/* 注意 */
1. 有多个过渡时间以 , 隔开（如示例2）,
并且每个时长会被应用到由 transition-property 指定的对应属性上
2. 时间默认为0,表示不会呈现过渡动画,属性会瞬间完成转变, 不能为负值

1.1.3 transition-delay

transition-delay 用于规定在过渡效果开始作用之前需要等待的时间，即延迟多久执行动画。

/* 语法 */
transition-delay: 过渡等待的时间
/* 取值 */
<time>类型
/* 示例 */
transition-delay: 3s;
transition-delay: 1s 2s 3s;
/* 注意 */
1. 有多个等待时间以 , 隔开（如示例2）,
并且每个时长会被应用到由 transition-property 指定的对应属性上
2. 时间默认为0,取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

1.1.4 transition-timing-function

transition-timing-function 用于规定在过渡效果执行时采取的时序函数。

/* 语法 */
transition-timing-function: 时序函数
/* 取值 */
<timing-function>类型
linear: 匀速运动
ease: 慢速开始，先加速后减速 [ 默认值 ]
ease-in: 加速运动
ease-out: 减速运动
ease-in-out: 先加速后减速
cubic-bezier(): 贝塞尔曲线
steps(): 分步执行过渡效果
- end，在时间结束时执行过渡（默认值）
- start，在时间开始时执行过渡
/* 示例 */
transition-timing-function: ease-out;
transition-timing-function: steps(8, end);

2、动画（animation）

动画（animation）与过渡类似，都是可以实现一些动态的效果，不同的是

过渡需要在某个属性发生变化时才会触发
动画可以自动触发动态效果

1.1属性值

1.1.1 animation-name

animation-name 用于指定应用的一系列动画，每个名称代表一个由@keyframes 定义的动画序列。@keyframes 通过在动画序列中定义关键帧的样式来控制 CSS 动画序列中的中间步骤。和转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。

/* 语法 */
animation-name: 动画名称
/* 取值 */
none: 特殊关键字，表示无关键帧
动画名称: 自定义的关键帧名字
/* 示例 */
@keyframes magnify {
   /* 动画开始位置也可以使用 0%*/
   from{ width:10px;height:10px; }
   /* 动画结束位置也可以使用 100%*/
   to{ width:20px;height:20px; }
}
.box{ /* 设置动画 */
   animation-name: magnify ;
}
/* 注意 */
1.如果多个关键帧使用同一个名称，以最后一次定义的为准。
2.如果某一个关键帧出现了重复的定义，且重复的关键帧中的 CSS 属性值不同，
则以最后一次定义的属性为准。
3.关键帧中出现的 !important 将会被忽略。

1.1.2 animation-duration

animation-duration 用于设置动画完成一个动画周期所需的时间。

/* 语法 */
animation-duration: 动画名称
/* 取值 */
<time>类型
/* 示例 */
animation-duration: 3s;
animation-duration: 1s 2s 3s;

1.1.3 animation-delay

动画效果的延迟，等待一段时间后再执行动画。

1.1.4 animation-timing-function

动画的时序函数，与transition-timing-function取值和用法一致。

1.1.5 animation-iteration-count

动画执行的次数。

/* 取值 */
<number>类型: 默认为 1。可以指定非整数值以播放动画循环的一部分：
例如，0.5 将播放动画循环的一半。负值是无效的。
infinite: 无限循环播放动画
/* 示例 */
animation-iteration-count: 3.5;
animation-iteration-count: 2, 0, infinite;

1.1.6 animation-direction

指定动画运行的方向。

/* 取值 */
normal: 每个循环内动画向前循环，换言之，每个动画循环结束，
动画重置到起点重新开始，这是默认属性。

alternate: 动画交替反向运行，反向运行时，动画按步后退，
同时，带时间功能的函数也反向，比如，ease-in 在反向时成为
ease-out。计数取决于开始时是奇数迭代还是偶数迭代

reverse: 反向运行动画，每周期结束动画由尾到头运行。

alternate-reverse: 反向交替，反向开始交替。动画第一次运行时是反向的，
                  然后下一次是正向，后面依次循环。
                  决定奇数次或偶数次的计数从 1 开始。

1.1.7 animation-play-state

设置动画的执行状态。

/* 取值 */

running: 当前动画正在运行。

paused: 当前动画已被停止。

1.1.8 animation-fill-mode

动画的填充模式。

设置 CSS 动画在执行之前和之后如何将样式应用于其目标。

/* 取值 */
none: 动画执行完毕，元素回到原来位置，默认值
forwards: 动画执行完毕，元素会停止在动画结束的位置
backwards: 动画延时等待时，元素就会处于开始位置
both: 结合了forwards和backwards

3、变换（transform）

变换（transform）属性用于旋转，缩放，倾斜或平移给定元素。变形不会影响到页面的布局。

3.1 属性值

3.1.1 translate平移

通过 translate 可以使元素沿着x、y或z平移指定的距离。可以单独声明平移变换，并独立于 transform 属性。

/* 不独立声明 */
/* 使用 */
transform: translateX(10px);
/* 取值 */
translateX() 沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移

/* 独立声明 */
/* 使用 */
translate: 105px;
/* 取值 */
1. 一个长度值或百分比，表示二维平移，与声明了 X 轴和 Y 轴的平移一样（此时省略的第二个值默认为 0）
2. 两个长度值或百分比表示在二维上分别按照指定 X 轴和 Y 轴的值进行的平移
3. 三个长度值或百分比，表示分别指定 X 轴、Y 轴、Z 轴的值进行三维平移

3.1.2 rotate旋转

通过 rotate 可以使元素沿着x、y或z旋转指定的角度。可以单独声明，并独立于 transform 属性。

/* 不独立声明 */
/* 使用 */
transform: rotateY(180deg);
/* 取值 */
rotateX() 绕着x轴方向旋转
rotateY() 绕着y轴方向旋转
rotateZ() 绕着z轴方向旋转

/* 独立声明 */
/* 使用 */
rotate: 90deg;
/* 取值 */
1. 角度值
       deg: 度一个完整的圆是 360deg
grad: 百分度一个完整的圆是 400grad
rad: 弧度一个完整的圆是 2π 弧度 , 1rad 是 180/π 度
       turn: 圈数一个完整的圆是 1turn
2. x, y 或者 z 轴名称加上角度值
       rotate: x 90deg;
       rotate: y 0.25turn;
       rotate: z 1.57rad;
3. 向量加上角度值
4. none