css动画里面transition和transform以及animation和和keyframes几个属性的区别，以及语法格式

原创已于 2024-03-07 22:45:34 修改 · 2.7k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#html #css3 #前端 #javascript

于 2023-11-24 23:58:25 首次发布

本文详细介绍了CSS中的transition（过渡）和animation（动画），包括它们的语法、关键属性如持续时间、速度曲线、延迟等，以及transform（变换）和keyframes（关键帧）的作用和使用方法。

语法格式：

transition

过渡属性，用于在某个属性值发生变化时，实现平滑的过渡效果。它可以指定过渡的属性、持续时间、速度曲线和延迟时间。过渡效果需要在事件触发后才能生效，如 hover 事件。

语法

transition: 属性名持续时间速度曲线延迟时间；

transition：property duration timing-function delay（语法格式）

举例transition: all 1s ease 0s;

transition：

property（规定过度属性的名称）1 none 没有属性获得过度效果 2.all 所有属性获得过度效果 3.property 定义过度属性css列表

duration（定义过渡效果花费的时间）1.time 毫秒或者秒计算 0意味着没有效果

timing-function（规定过度效果的时间曲线）

1.linear（规定相同速度开始到结束的过程（效果大概就是0，0，1，1））

2.ease（慢速开始然后变快（效果大概就是0.25,0.1,0.25，1））

3.ease-in慢速开始的过渡效果（效果大概是0.42，0，1，1）

4. ease-out 慢速结束的过渡效果（效果大概就是0，0，0.58，1）

5.ease-in-out慢速开始和结束的过渡效果（大概就是0.42,0,0.58,1）

6.cubic-bezier自己定义效果（n，n，n，n）

delay效果等待的时间

transform语法格式

transform:

其中，表示变换函数，表示变换的值。以下是一些常见的变换函数：

translate(x,y)：沿 X 轴或 Y 轴移动元素。例如：transform: translate(100px); 表示沿 X 轴向右移动 100 像素。

scale()：缩放元素。例如：transform: scale(1.5); 表示将元素放大到原来的 1.5 倍。

rotate()：旋转元素。例如：transform: rotate(45deg); 表示将元素旋转 45 度。

skew(x，y)：倾斜元素。例如：transform: skew(30deg, 45deg); 表示将元素沿 X 轴和 Y 轴分别倾斜 30 度和 45 度。

matrix(a，b，c，d，e，f)：应用一个矩阵变换。例如：transform: matrix(1, 0, 0, 1, 0, 0); 表示保持元素不变形。

translate3d(x，y，z)：沿 3D 空间中的 X、Y 和 Z 轴移动元素。

例如：transform: translate3d(100px, 200px, 300px); 表示沿 Z 轴向外移动 300 像素。

在上述语法中，都是数值，可以是像素、百分比或其他长度单位。

需要注意的是，transform 属性可以与其他变换函数组合使用，以实现更复杂的动画效果。例如：transform: rotate(45deg) scale(1.5); 表示先将元素旋转 45 度，然后放大到原来的 1.5 倍。

所以可以是预定动画animation 下面跟随帧格式帧格式里面写上0%{transform: translate(200px,0);}变形初始位置x200 y0

animation语法格式

animation: 动画名称持续时间缓动函数延迟时间播放次数；

animation: ;

其中，、、、和都是必选属性，具体说明如下：

：动画的名称，用于标识动画。

：动画的持续时间，以秒（s）或毫秒（ms）为单位。

：动画延迟时间，以秒（s）或毫秒（ms）为单位。延迟时间表示在动画开始之前等待的时间。

：动画播放的次数。默认值为 1，表示动画会无限次播放。

：动画函数，用于描述动画的效果。常见的动画函数有 linear、ease、ease-in、ease-out、ease-in-out 等。

举例animation: my-animation 2s 1s infinite ease-in-out;

这个示例定义了一个名为 "my-animation" 的动画，持续时间为 2 秒，延迟时间为 1 秒，播放次数为无限次，动画效果为ease-in-out。

举例animation: cir 4s infinite alternate;

cir 是动画的名字，它需要与 @-webkit-keyframes 规则中的名称对应。在这个例子中，我们没有提供 @-webkit-keyframes 规则，所以这个动画名称暂时没有对应的状态定义。

4s 是动画的持续时间，表示动画运行的总时长。在这个例子中，动画将持续4秒。

infinite 表示动画将无限次重复。alternate 定义了动画的播放方向，当动画重复次数为奇数时，方向相反；当重复次数为偶数时，方向向前。在这个例子中，动画将无限次重复，且每次重复的方向相反

@keyframes 语法格式

作用以及举例

transition变形属性（注重过度效果）不能重复

transition：property duration timing-function delay（语法格式）

transform变形属性（注重变形也就是旋转结束状态缩放等）

animation（定义预定动画的属性关键帧@keyframes可以在里面定义然后应用到里面）

@keyframes（关键帧动画也就是会产生动画动起来的属性）

transform：变换属性，用于对元素进行二维或三维变换。transform 可以实现多种变换效果，如旋转、缩放、平移等。transform 属性通常与 transition 或 animation 属性结合使用，实现动画效果。

语法

animation:这是一个用于应用预定义动画的属性。通过这个属性，您可以将 @keyframes 规则定义的动画应用到目标元素。动画属性可以控制动画的播放次数、动画持续时间、动画延迟等。这样，您可以为元素创建平滑、交互式的动画效果

keyframes：关键帧动画，用于定义 CSS 动画。通过关键帧，可以指定动画的起始状态、结束状态以及动画过程中的各个状态。keyframes 通常与 animation 属性结合使用，实现复杂的动画效果。

transition和keyframes 以及transform animation几个属性的区别

transition：
transition 属性用于在某个属性值之间实现过渡效果。它包含四个简写属性：transition-property（过渡属性）、transition-duration（过渡持续时间）、transition-timing-function（过渡速度曲线）和 transition-delay（过渡延迟）。过渡效果需要在事件触发时才能生效，如 :hover。

keyframes：
keyframes 用于定义 CSS 动画的关键帧。通过指定不同的属性值和时间点，可以创建复杂的动画效果。 Keyframes 通常与 animation 属性结合使用。

transform：
transform 属性用于对元素进行二维或三维变换，如旋转、缩放、平移等。它可以直接在 CSS 中使用，也可以与 transition 或 animation 结合使用来实现动画效果。

animation：
animation 属性用于创建基于关键帧的动画。它包含多个属性，如 animation-name（动画名称）、animation-duration（动画持续时间）、animation-timing-function（动画速度曲线）等。与 keyframes 结合使用，可以创建复杂的动画效果。

总结：
transition 用于实现简单属性值之间的过渡效果，需要在事件触发时生效；
keyframes 用于定义动画的关键帧，与 animation 结合使用；
transform 用于对元素进行变换，可以直接使用或与过渡属性结合实现动画；
animation 用于创建基于关键帧的复杂动画，与 keyframes 结合使用。

transition和animation的区别

transition和animation都是CSS中的动画属性，它们都可以使元素在一定时间内发生变化，但它们在用法和特性上有一些区别：

触发方式：

- transition：需要触发一个事件（如：hover、focus等）才能启动动画，且只能设置起始和结束状态。
- animation：无需触发事件，可以主动执行，并可以在任意一个中间帧设置状态。

动画状态：

- transition：过渡效果只能设置两个状态（起始和结束），不能无限重复执行。
- animation：动画可以设置多个状态，可以无限重复执行。

控制方式：

- transition：通过设置属性值（如：时间、速度曲线、延迟等）来控制动画。
- animation：通过编写关键帧（@keyframes）来控制动画，并可以设置动画名称、时间、速度曲线、延迟、重复次数等。

应用场景：

- transition：通常用于实现页面元素的过渡效果，如：鼠标悬停时元素颜色变化、宽度变化等。
- animation：主要用于创建复杂的动画效果，如：人物奔跑、物体变形等。

总结语法格式

transition: 属性名持续时间缓动函数延迟时间；

transition：property duration timing-function delay（语法格式）

@keyframes 动画名称 { 0% { /* 动画起始状态的样式 */ } /**/ 100% { /* 动画结束状态的样式 */ } }

transform: 变换函数（如 'translateX'、'rotate'、'scale' 等）持续时间缓动函数 transform: <transform-function> <transform-value>;</transform-function>

animation: 动画名称持续时间缓动函数延迟时间播放次数； animation: <animation-name> <duration> <delay> <iteration-count> <animation-function>;

代码举例

.con img{width: 200px;height: 200px;padding: 10px;
           background: wheat;box-shadow: 3px 3px 4px rgba(50,50,50,0.4);
           border-radius:30% ;transition: 2s ease-in;//动画变化时间两秒采取慢速开始的过渡效果
           position: absolute;}

           .ya1{
               top: 120px;
               left: 320px;
               transform: rotate(-20deg) skew(-30deg);

rotate(-20deg)：以元素中心为旋转点，也就是逆时针旋转20度。
skew(-30deg)：沿 x 轴和 y 轴分别倾斜 -30 度。负角度表示向左倾斜，正角度表示向右倾斜。

}