CSS（七）元素过渡、变化、动画
目录
一、元素动效
1. 过渡 - transition
过渡为一个元素在不同状态之间切换不同的过渡效果，由过渡属性的名称、过渡需要的时间、过渡的方式、过渡的延迟时间四部分组成。注意过渡必须是在元素状态切换下进行，需要用到伪类。
（1）过渡属性的名称 - transition-property 过渡样式
-
div {
-
transition-property: background-color;
-
}
值需要直接写需要过渡的属性名称，当过渡多个样式的时候可以写 all。
（2）过渡需要的时间 - transition-duration
-
div {
-
transition-duration: 0.5s;
-
}
（3）过渡的方式 - transition-timing-function，CSS中封装了5种方式：
| ease; | 默认值，先慢再快最后慢 |
| ease-in; | 先慢，后越来越快 |
| ease-in-out; | 速度在开始和结束时都很慢,中间不加速 |
| ease-out; | 先快，后越来越慢 |
| linear; | 匀速 |
-
div {
-
transition-timing-function: linear;
-
}
（4）过渡的延迟时间 - transition-delay
延迟时间指在过渡效果开始作用之前需要等待的时间，以s或ms为单位，取值为正会延迟一段时间来响应过渡效果；取值为负会导致过渡立即开始。
-
div {
-
transition-delay: 1s;
-
}
（5）简化写法，格式：transition：过渡时间 延迟时间 过渡方式 过渡样式（延迟时间必须写在过渡时间以后，其他可以调换位置；最简写法为 transition:过渡时间）。
-
div {
-
transition: 1s 1s ease background-color;
-
}
（6）多重样式过渡，使用 transition 进行多个不同的过渡样式时，每一个不同时间的过渡样式用逗号分隔。
-
div {
-
transition: 1s border-radius, 1s 1s opacity;
-
}
2. 变化
（1）translate( ) 位移函数
| transform: translateX(x); | 沿X轴方向平移，正值右移，负值左移 |
| transform: translateY(y); | 沿Y轴方向平移，正值下移，负值上移 |
| transform: translate(x, y); | 沿X轴和Y轴同时平移 |
使用margin负值方法的元素居中必须知道子元素的宽高，而位移函数不用：
-
.zi {
-
position: absolute;
-
top: 50%;
-
left: 50%;
-
transform: translate(-50%, -50%);
-
}
（2）rotate( ) 旋转函数，该函数默认为 Z 轴旋转，deg 单位为旋转角度，角度可以为正值或负值，旋转的中心点是元素最中心的点。
-
div {
-
transform: rotateZ(360deg);
-
}
（3）scale( ) 缩放函数，缩放函数中的参数是以倍数为基础的，1代表当前大小，
| 1 | 代表当前大小 |
| >1 | 代表放大的倍数 |
| <1 | 代表缩小的倍数 |
| 0 | 代表消失 |
| 负值 | 代表镜面翻转，后面的数字仍然生效 |
也可以写两个值，如果写一个表示x轴和y轴用同一个值。
-
div {
-
transform: scale(-1, -1);
-
}
（4）skew( ) 倾斜扭曲函数，在 2d 变换中倾斜，可以有 X 轴和 Y 轴的倾斜角度，默认为 X 轴倾斜。
| skewX | x轴扭曲，正值水平左侧扭曲，负值右侧扭曲 |
| skewY | y轴扭曲，正值左侧向上，负值右侧向上 |
-
div {
-
transform: skewX(-40deg);
-
transform: skewY(50deg);
-
}
（5）基点 - transform-origin
改变元素变化时的原点，默认情况下，元素的中心原点位于 x 轴和 y 轴的 50% 处。
3. 动画
（1）关键帧 - @keyframes
css中的@规则，通过在动画序列中定义关键帧的样式，来控制CSS动画序列中的步骤，以百分比来规定改变发生的时间，或者通过关键词"from"和"to"，等价于0%和100%。创建关键帧方法如下：
-
@keyframes move {
-
0% {transform: translate(0);}
-
100% {transform: translate(600px);}
-
}
-
/* 0%为开始时间 */
-
/* 100%为结束时间 */
-
/* move为帧名 */
（2）动画名称 - animation-name，指定动画要使用哪一个关键帧。
（3）结束时间 - animation-duration，代表一个动画周期的时长，默认值0秒，调用动画时必须写：动画名称、持续时间。
（4）运动方式 - animation-timing-function
| ease; | 默认值，先慢再快最后慢 |
| ease-in; | 先慢，后越来越快 |
| ease-in-out; | 速度在开始和结束时都很慢,中间不加速 |
| ease-out; | 先快，后越来越慢 |
| linear; | 匀速 |
| steps(数值, 定位) | 定位：start/end，默认为end指逐步运动 |
-
div {
-
animation-timing-function: steps(8,end);
-
}
（5）延迟时间 - animation-delay，与过渡延迟时间同用。
（6）结束状态 - animation-fill-mode，设置动画结束时盒子的状态，在动画运行到某个位置的时候，动画停止，元素默认会迅速回到起始位置。
| forwards | 保持动画结束后的状态 |
| backwards | 动画结束后回到最初的状态 |
（7）执行顺序 - animation-direction
| normal | 正向，默认值 |
| reverse | 反向 |
（8）循环次数 - animation-iteration-count，其值通常为整数，默认为1，值infinite表示无限循环。
（9）简写方式
格式：animation: 执行时间 延迟时间 关键帧名称 运动方式 运动次数 结束状态;
最简：最简方式 animation: 动画执行时间 执行关键帧名称;（ 注意执行时间和延迟时间顺序不可调整）
（10）动画停止 - animation-play-state，单独写，不可加入简写之中。
| running | 运动的（默认） |
| paused | 暂停 |
-
/*鼠标移入ul时，暂停动画*/
-
.xz-roll ul:hover {
-
animation-play-state: paused;
-
}
css 样式将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。只通过修改一个文件就改变页数不计的网页的外观和格式。 在所有浏览器和平台之间的兼容性。更少的编码、更少的页数和更快的下载速度。除了还不能全面支持我们常用的大多数浏览器之外，CSS 在实现其它承诺方面作得相当出色。CSS 在改变我们制作样式表的方法。它为大部分的网页创新奠定了基石。
CSS 终。
文章来源: majinjian.blog.csdn.net，作者：Developer 小马，版权归原作者所有，如需转载，请联系作者。
原文链接：majinjian.blog.csdn.net/article/details/119986278
- 点赞
- 收藏
- 关注作者
评论（0）