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

技术文档

文章目录

一、过渡
- 1.1 transition-property 指定内容具有过渡效果
- 1.2 transition-duration：time 变化时间
- 1.3 transition-timing-function 过渡效果的速度曲线
- 1.4 transition-delay：time 延时播放
- 1.5 transition 的复合属性
二、变形
- 2.1 transform：translate（x,y）位移
- 2.2 transform：rotate（x deg）旋转
- 2.3 transform：scale（x,y）缩放
- 2.4 transform：skew（x deg ,y deg）倾斜
- 2.5 background-image:inear-gradient 渐变
- - 2.5.1 线性渐变
  - - 2.5.1.1 省略渐变方向和终点位置
    - 2.5.1.2 指定方向（to 方位）
    - 2.5.1.3 指定方向（角度）
    - 2.5.1.4 指定终点位置
  - 2.5.2 径向渐变
三、动画
- 3.1 @keyframes animation
- 3.2 animation属性
- - 3.2.1 animation-interation-count 播放次数
  - 3.2.2 animation-timing-function 速度曲线
  - 3.2.3 animation-direction 播放方向
  - 3.3.4 animation-fill-function 完毕状态
  - 3.2.5 animation-play-state 动画暂停

在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>

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

2.2 transform：rotate（x deg）旋转

注意：

取值为正表示顺时针，取值为负则为反方向
默认旋转原点为盒子中心点
transform-origin 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>

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

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>

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

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>

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

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>

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

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>

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

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>

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

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>

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

三、动画

过渡与动画的区别：

过渡：只能实现两个状态的变化，并且需要搭配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>

动画示例3

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

文章目录

一、过渡

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

1.2 transition-duration：time 变化时间

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

1.4 transition-delay：time 延时播放

1.5 transition 的复合属性

二、变形

2.1 transform：translate（x,y）位移

2.2 transform：rotate（x deg）旋转

2.3 transform：scale（x,y）缩放

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

2.5 background-image:inear-gradient 渐变

2.5.1 线性渐变

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

2.5.1.2 指定方向（to 方位）

2.5.1.3 指定方向（角度）

2.5.1.4 指定终点位置

2.5.2 径向渐变

三、动画

3.1 @keyframes animation

3.2 animation属性

3.2.1 animation-interation-count 播放次数

3.2.2 animation-timing-function 速度曲线

3.2.3 animation-direction 播放方向

3.3.4 animation-fill-function 完毕状态

3.2.5 animation-play-state 动画暂停

公告

DeepSeek全套部署资料免费下载

免费可商用字体批量下载

标签

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

文章目录

一、 过渡

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

1.2 transition-duration：time 变化时间

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

1.4 transition-delay：time 延时播放

1.5 transition 的复合属性

二、 变形

2.1 transform：translate（x,y）位移

2.2 transform：rotate（x deg）旋转

2.3 transform：scale（x,y）缩放

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

2.5 background-image:inear-gradient 渐变

2.5.1 线性渐变

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

2.5.1.2 指定方向（to 方位）

2.5.1.3 指定方向（角度）

2.5.1.4 指定终点位置

2.5.2 径向渐变

三、动画

3.1 @keyframes animation

3.2 animation属性

3.2.1 animation-interation-count 播放次数

3.2.2 animation-timing-function 速度曲线

3.2.3 animation-direction 播放方向

3.3.4 animation-fill-function 完毕状态

3.2.5 animation-play-state 动画暂停

相关问题

公告

DeepSeek全套部署资料免费下载

免费可商用字体批量下载

标签

一、过渡

二、变形