本文介绍了CSS中的过渡、形变和动画概念及应用。过渡用于在鼠标交互时平滑改变元素属性，涉及transition属性及多个子属性。形变通过transform属性实现元素形状的变换，包括位移、缩放和旋转等效果。动画则允许元素从一种样式平滑过渡到另一种，通过animation属性控制其执行次数、方向和状态等。
一、什么是过渡
鼠标移动到一个元素上面，元素发生变化，鼠标移走，变化消失；这是一个动态的过程，这就是过渡。在CSS过渡中允许你在给定的时间内平滑地改变属性值。
通过过渡可以指定一个属性发生变化的切换方式；
通过过渡可以创建一些非常好的效果，提升用户体验感；
使用过渡就是使用我们transition这个属性；
二、过渡的属性
1、transition 【复合写法】用于向四个过渡属性设置为单一属性
2、transition-duration 规定过渡效果要持续多少秒/毫秒，属性值：时间【必须属性】
3、transition-delay 规定过渡效果的延迟（以秒记）属性值：时间
4、transition-property 规定过渡效果所针对的CSS属性的名称
5、transition-timing-function 规定过渡效果的速度曲线
这些属性值部分顺序，但第一个时间必定是过渡花费时间。持续时间第二个时间才是过渡延迟时间。
transition-timing-function 属性可以使用的属性值
| ease | 规定过渡效果，先缓慢开始，然后加速，然后缓慢的结束（默认） |
| linear | 从开始到结束具有相同速度的过渡效果，匀速运动 |
| ease-in | 缓慢开始，加速运动 |
| ease-out | 缓慢结束，减速运动 |
| ease-in-out | 以慢速开始和结束的过渡效果 |
| cubic-bezier（n,n,n,n） | 允许你在三次贝塞尔函数中定义自己的值 |
| step（n） | 分步执行 |
案列展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.contain {
width: 132px;
height: 271px;
background-color: pink;
margin: 100px
最低0.47元/天 解锁文章
123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
