【WEB】CSS过渡，变形与动画详解

重生之我是Java开发战士

已于 2025-07-30 09:28:35 修改

阅读量952

点赞数 14

CC 4.0 BY-SA版权

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

于 2025-07-11 22:26:45 首次发布

本文链接：https://blog.csdn.net/2501_90752941/article/details/148973818

WEB 专栏收录该内容

12 篇文章

订阅专栏

文章目录

一、过渡
二、变形
三、动画

在Web开发中，静态的页面早已无法满足用户对交互体验的期待。当我们浏览那些流畅切换的按钮状态、随鼠标舞动的元素，或是富有节奏感的加载动画时，背后往往藏着CSS的三大“魔法”—— 过渡（transition）、变形（transform）和动画（animation）。它们就像给页面注入生命力，让枯燥的像素组合拥有了呼吸感与叙事性。。

一、过渡

CSS3提供了强大的过度属性，它可以在不使用Flash或JavaScript的情况下，为元素从一种样式转化为另一种样式时添加效果，例如渐显，渐弱，动画快慢等等

1.1 transition-property 指定内容具有过渡效果

取值：

none
all
property 定义过度效果的css名称

1.2 transition-duration：time 变化时间

单位：

秒（s）
毫秒（ms）

以下是指定内容和变化时间的演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡，变形，动画</title>
    <style>
        .eg1{
            width:200px;
            height:100px;
            background-color: #f99b9b;
            transition:background-color 3s;
        }    
        .eg1:hover{
            background-color: #760707;
        }
        </style>
</head>

<body>
  <div class="eg1"></div>  
</body>
</html>

过渡演示

1.3 transition-timing-function 过渡效果的速度曲线

取值：

linear 匀速相当于cubic-bezier（0，0，1，1）
ease 慢-加快-慢相当于cubic-bezier（0.25，0.1，0.25，1）
ease-in 慢-快（淡入）相当于cubic-bezier（0.42，0，1，1）
ease-out 快-慢（淡出）相当于cubic-bezier（0，0，0.58，1）
ease-in-out 低速开始，低速结束相当于cubic-bezier（0.42，0，0.58，1）
steps(n) 分布动画常配合精灵图实现精灵动画
cubic-bezier(n,n,n,n) 定义用于加速或减速的贝塞尔曲线取值为0 - 1

1.4 transition-delay：time 延时播放

取值：

秒（s）
毫秒（ms）

1.5 transition 的复合属性

transition ：property duration timing-function delay
注意： 设置多个参数时参数要按照定义顺序，不可以颠倒。尤其注意变化时间在延时时间之前。

二、变形

CSS3之前，需要依赖图片、Flash或JavaScript才能实现变形，而CSS3提供了transform属性来实现变形效果。

2.1 transform：translate（x,y）位移

取值：

px
% 基于元素本身计算

注意：

以元素的左上角为基点
省略第二个参数时默认为0，仅该改变水平位移。
使用translateX（），translateY（）可以分别指定水平和竖直方向上的位移
取值为正分别表示向右、向下，负数则为反方向。

应用：使元素位于中心

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡，变形，动画</title>
    <style>
     .eg2{
            width:200px;
            height:100px;
            background-color: #eb7070;
            position :absolute;
            left:50%;
            top:50%;
            /* 此时盒子左上角位于浏览器正中心 */
            transform:translate(-50%,-50%);
            /* 此时盒子中心位于浏览器中心 */
        }
    </style>
</head>

<body>
  <div class="eg2"></div>  
</body>
</html>

eg2

2.2 transform：rotate（x deg）旋转

注意：

取值为正表示顺时针，取值为负则为反方向
默认旋转原点为盒子中心点
transform-origin :x y 改变旋转原点

取值：

left ，right，top，bottom，center
%
px

以下是旋转示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡，变形，动画</title>
    <style>
        .eg4{
            transition: all 1s;
        }
        .eg4:hover{
            width:50px;
            transform: rotate(360deg);
        }
        </style>
</head>

<body>
  <img class="eg4" src="./blue.jpg"></img>  
</body>
</html>

旋转演示

transform:translate( ) rotate( ) 可以实现位移和旋转的复合效果但是 位移必须放在旋转之前

以下是位移和旋转复合的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡，变形，动画</title>
    <style>
      .eg7 img{
            transition: all 3s;
        }
      .eg7:hover img{
            transform: translate(650px) rotate(720deg);
        }
        </style>
</head>

<body>
    <div class="eg7">
        <img src="./blue.jpg" width="50px">
    </div>
</body>
</html>

位移旋转复合演示

2.3 transform：scale（x,y）缩放

注意：

取值可以为正数，负数，小数。正数表示基于指定的宽度和高度放大元素。负数不会缩小元素，而是反转后缩放元素。
如果省略第二个参数，则第二个参数等于第一个参数。

以下是缩放的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡，变形，动画</title>
    <style>
        .eg8 img{
            width:100%;
            transition: all 1s;
        }
        .eg8:hover img{
            transform: scale(0.8);
        }
        </style>
</head>

<body>
     <div class="eg8">
        <img src="./blue.jpg" width="100px">
    </div>
</body>
</html>

缩放演示

2.4 transform：skew（x deg ,y deg）倾斜

注意：

正数表示分别沿x，y轴顺时针扭曲，负数表示反向方向。
省略第二个参数则默认在水平方向上倾斜，竖直方向上不变。
子元素会继承父元素的倾斜效果，如果避免可以设置为skew（0）。

以下是倾斜的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡，变形，动画</title>
    <style>
        .eg9{
            margin-left: 50px;
            width:100px;
            height:200px;
            background-color: #f0b1b1;
            transition:all 1s;
        }
        .eg9:hover{
            transform: skew(10deg);
        }
        </style>
</head>

<body>
     <div class="eg9"></div>
</body>
</html>

倾斜演示

2.5 background-image:inear-gradient 渐变

2.5.1 线性渐变

属性：
background-image : linear-gradient(
渐变方向，
颜色1 终点位置，
颜色2 终点位置，
…
);
取值：
- 渐变方向：（可选，默认为由上到下）：
  - to 方位
  - 角度度数
- 终点位置（可选，默认为各50%）：
  - 百分比

2.5.1.1 省略渐变方向和终点位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡，变形，动画</title>
    <style>
        .eg10{
            margin:10px;
            width:200px;
            height:200px;
            background-image: linear-gradient(
                /* 省略方向，默认为从上到下 */
                rgb(240, 162, 162),rgb(169, 219, 169)
            );
        }
        </style>
</head>

<body>
     <div class="eg10"></div>
</body>
</html>

2.5.1.2 指定方向（to 方位）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡，变形，动画</title>
    <style>
        .eg10{
            margin:10px;
            width:200px;
            height:200px;
            background-image: linear-gradient(
               to right,
               rgb(240, 162, 162),rgb(169, 219, 169)
            );
        }
        </style>
</head>

<body>
     <div class="eg10"></div>
</body>
</html>

2.5.1.3 指定方向（角度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡，变形，动画</title>
    <style>
        .eg10{
            margin:10px;
            width:200px;
            height:200px;
            background-image: linear-gradient(
               45deg,
               rgb(240, 162, 162),rgb(169, 219, 169)
            );
        }
        </style>
</head>

<body>
     <div class="eg10"></div>
</body>
</html>

2.5.1.4 指定终点位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡，变形，动画</title>
    <style>
        .eg10{
            margin:10px;
            width:200px;
            height:200px;
            background-image: linear-gradient(
               rgb(240, 162, 162) 70% ,rgb(169, 219, 169)
            );
        }
        </style>
</head>

<body>
     <div class="eg10"></div>
</body>
</html>

2.5.2 径向渐变

属性：
background-image : linear-gradient(
半径 at 圆心位置
颜色1 终点位置，
颜色2 终点位置，
…
);
取值：
- 半径：（可以为2个，空格隔开，即椭圆）
- 圆心位置：
  - 百分比
  - px
  - 方位
2.5.2.1 圆心居中，一个半径：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡，变形，动画</title>
    <style>
        .eg14{
            width: 100px;
            height:100px;
            border-radius: 50%;
            background-color: #f6bcbc;
            margin:10px ;
            background-image: radial-gradient(
                50px at center center,
                rgb(240, 33, 33) ,rgb(238, 198, 205)
            );
        }
        </style>
</head>

<body>
     <div class="eg14"></div>
</body>
</html>

2.5.2.2 圆心居中，两个半径：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡，变形，动画</title>
    <style>
        .eg15{
            width: 100px;
            height:100px;
            border-radius: 50%;
            background-color: #f6bcbc;
            margin:10px ;
            background-image: radial-gradient(
                50px 20px at center center,
                rgb(240, 33, 33) ,rgb(238, 198, 205)
            );
        }
        </style>
</head>

<body>
     <div class="eg15"></div>
</body>
</html>

2.5.1.3 圆心偏移，一个半径：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡，变形，动画</title>
    <style>
        .eg16{
            width: 100px;
            height:100px;
            border-radius: 50%;
            background-color: #f6bcbc;
            margin:10px ;
            background-image: radial-gradient(
                50px 20px at center center,
                rgb(240, 33, 33) ,rgb(238, 198, 205)
            );
        }
        </style>
</head>

<body>
     <div class="eg16"></div>
</body>
</html>

![](https://i-blog.csdnimg.cn/direct/dfcf58bd5e7c4da88bc95150503209ee.png

三、动画

过渡与动画的区别：

过渡：只能实现两个状态的变化，并且需要搭配hover
动画：可以实现多个状态的变化，状态可控。

3.1 @keyframes animation

定义

@keyframes 动画名称{
from{ … }
to{ … }
}
@keyframes 动画名称{
关键帧1{ … }
关键帧2{ … }
关键帧3{ … }
…
}

使用
animation ：动画名称动画时间
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡，变形，动画</title>
    <style>
         @keyframes img1 {
            from{
                width:200px;
            }
            to{
                width:400px;
            }
        }
        .eg17{
            width:200px;
            animation:img1 2s
        }
        </style>
</head>

<body>
     <img class="eg17" src="./blue.jpg"></img>
</body>
</html>

动画示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡，变形，动画</title>
    <style>
        @keyframes img2 {
            0%{
                width:200px;
            }
            50%{
                width:400px;
            }
            100%{
                width:200px;
            }
        }
        .eg18{
            width:200px;
            animation:img2 2s
        }
        </style>
</head>

<body>
     <img class="eg18" src="./blue.jpg"></img>
</body>
</html>

动画示例2

3.2 animation属性

注意：

动画名称和时间必须赋值
赋值不分先后顺序
如果有两个时间值，则第一个为动画时长，第二个为延迟时间

3.2.1 animation-interation-count 播放次数

取值：

number 数字
infinite 循环

3.2.2 animation-timing-function 速度曲线

linear 匀速相当于cubic-bezier（0，0，1，1）
ease 慢-加快-慢相当于cubic-bezier（0.25，0.1，0.25，1）
ease-in 慢-快（淡入）相当于cubic-bezier（0.42，0，1，1）
ease-out 快-慢（淡出）相当于cubic-bezier（0，0，0.58，1）
ease-in-out 低速开始，低速结束相当于cubic-bezier（0.42，0，0.58，1）
steps(n) 分布动画常配合精灵图实现精灵动画
cubic-bezier(n,n,n,n) 定义用于加速或减速的贝塞尔曲线取值为0 - 1

3.2.3 animation-direction 播放方向

normal 默认
alternate 奇数次正向，偶数次逆向

3.3.4 animation-fill-function 完毕状态

forwards 停在结束状态
backwards 停在起始状态（默认状态）

3.2.5 animation-play-state 动画暂停

paused 暂停搭配hover使用

实际开发中animation的符合属性更常用，代码简洁明了。
以下是animation复合属性示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡，变形，动画</title>
    <style>
        @keyframes eg17 {
            from{width:200px;}
            to{width:800px}
        }
        .eg19{
            width: 200px;
            height:100px;
            background-color: #f9cccc;
            animation: eg17 1s linear infinite alternate;
        }
        .eg19:hover{
            animation-play-state: paused;
        }
        
        </style>
</head>

<body>
     <div class="eg19"> </div>
</body>
</html>