transform、transition 和 animation 都是 CSS 属性，用于创建视觉效果，但它们的工作方式和用途不同：
1. transform (变换元素):
- 作用:
transform用于改变元素的旋转、缩放、移动、倾斜等属性，但不改变元素的初始状态和最终状态之间的中间状态。它就像一次性地将元素从一个状态改变到另一个状态，没有动画过程。 - 常用属性值:
rotate(angle): 旋转scale(x, y): 缩放translate(x, y): 平移skew(x-angle, y-angle): 倾斜matrix()：矩阵变换，可以组合多种变换效果
- transform: rotate3d(x,y,z,angle); 3D旋转
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值
y：是一个0到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值
z：是一个0到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值
angle：一个角度值，指定在3D空间旋转角度。 - 属性简写: transform: rotate scale translate skew matrix;
- transform-origin：旋转元素一般配合着transform-origin属性，transform-origin是用来设置旋转点的
- 示例:
transform: rotate(45deg);会立即将元素旋转 45 度，没有动画过渡。 - 关键特点:
transform本身不产生动画，它只是改变元素的视觉呈现。要实现动画效果，需要结合transition或animation使用。
2. transition (过渡):
- 作用:
transition提供了一种在两种状态（开始、结束）之间平滑过渡的方式。当元素的某些属性发生变化时（例如:hover、:focus或 JavaScript 修改），transition会使这些变化以动画的形式展现，而不是突变。 - 常用属性:
transition-property: 指定要过渡的属性 (例如width,height,background-color,transform等)可以设置为none（无过渡效果）、all（所有属性都有过渡效果）。transition-duration: 过渡的持续时间。transition-timing-function: 过渡的速度曲线 (例如ease,linear,ease-in-out等)。linear：从头到尾的速度相同 ease（默认）：以低速开始，然后加快，在结束前变慢 ease-in：动画以低速开始，结束前不断变快 ease-out：快速开始，结束前不断变慢 ease-in-out：开始和结束时段是慢速，中间部分速度最快 cubic-bezier(n,n,n,n)：动画以低速开始和结束贝塞尔曲线（可以用工具或者网站生成）transition-delay: 过渡的延迟时间。
- 属性简写: transition: property duration timing-function delay;
- 示例:
transition: width 2s ease-in-out;当元素的宽度发生变化时，会在 2 秒内以ease-in-out的速度曲线进行过渡。 - 关键特点:
transition需要触发，通常是通过改变元素的属性值来触发。它只能实现简单的、从一个状态到另一个状态的动画。
一些常见的可以使用 transition 的属性
- 背景相关属性
- background-color：背景颜色
- background-position：背景图片的位置
- background-size：背景图片的大小
- 其他背景相关的属性，如background-image（但需要注意，仅当背景图像是渐变或颜色时，才支持过渡）
- 边框相关属性
- border-color：边框颜色
- border-width：边框宽度
- border-style：边框样式
- 尺寸和位置相关属性
- width：元素宽度
- height：元素高度
- margin：元素的外边距
- padding：元素的内边距
- top、right、bottom、left：元素的位置
- 文本相关属性
- color：文本颜色
- font-size：字体大小
- line-height：行高
- text-shadow：文本阴影
- 透明度相关属性
- opacity：透明度
- 其他属性
- transform：元素变换，如旋转、缩放等
- outline：元素的外轮廓
- box-shadow：元素的盒子阴影
- clip：元素的裁剪区域
- visibility：元素的可见性
3. animation (动画):
- 作用:
animation允许创建更复杂的动画序列，可以定义多个关键帧和更精细的控制。它不需要像transition那样依赖于状态的变化来触发。 - 常用属性:
animation-name: 动画的名称，与@keyframes规则关联。animation-duration: 动画的持续时间。animation-timing-function: 动画的速度曲线。animation-delay: 动画的延迟时间。animation-iteration-count: 动画的播放次数 (例如infinite表示无限循环)。animation-direction: 动画的方向 (例如normal,reverse,alternate等)。animation-fill-mode: 设置当动画不播放时（动画播放完或延迟播放时）的状态；none: 不改变动画的默认行为 forwards: 当动画播放完成后，保持动画最后一个关键帧中的样式 backwards: 在 animation-delay 所指定的时间段内，应用动画第一个关键帧中的样式 both: 同时遵循 forwards 和 backwards 的规则-
animation-play-state：paused | running(默认) 规定动画正在运行还是暂停，paused（动画已暂停），running（动画正在播放）
- 属性简写: animation: name duration timing-function delay iteration-count direction fill-mode play-state;
- 示例:
@keyframes my-animation {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}
.element {
animation: my-animation 2s infinite;
}
- 关键特点:
animation更加灵活，可以创建复杂的动画效果，并且可以通过@keyframes规则精确控制动画的每个阶段。
停止动画的案例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 10s;
/* Safari and Chrome */
-webkit-animation: mymove 10s;
}
.running{
animation-play-state: running;
-webkit-animation-play-state: running;
}
.paused{
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 400px;
}
}
@-webkit-keyframes mymove
/* Safari and Chrome */
{
from {
left: 0px;
}
to {
left: 400px;
}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。</p>
<div class="running"></div>
<button id="btn">点击停止动画</button>
<script>
var btn = document.getElementById("btn");
var div = document.getElementsByTagName("div")[0];
btn.onclick = function (event) {
if (div.classList.contains("running")) {
div.classList.remove("running");
div.classList.add("paused");
}else{
div.classList.remove("paused");
div.classList.add("running");
}
}
</script>
</body>
</html>4.transition (过渡)和animation（动画）的区别
定义：
transition 过渡是一种样式转换到另一种样式时的效果animation是利用@keyframes关键帧完成（元素从开始过程到结束）不需要js技术就可以完成的动画制作
属性的简写
transition: property duration timing-function delay;transition:要过度的属性 花费的时间 运动曲线（linear匀速；ease逐渐慢下来；ease-in加速；ease-out减速,ease-in-out先加速后减速）何时开始；
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态。
//1、动画状态不同
1.transition 过渡只有开始和结束两种状态；
2.animation 有开始，过程，结束多种状态
//2、动画触发方式不同:
1. CSS的transition需要借助别的方式来触发, 比如CSS的状态选择器（如:hover）或 借助JavaScript来触发。
2. animation 不但可以使用上面的方式触发, 更重要的是可以自动触发。
//3、功能点（属性）不同
animation 控制动效上要比 transition 强，因为它具备一些控制动效的属性，比如“播放次数”、“播放方向”、“播放状态”等。
//transform和animation的相同点
1. 从整体来看，animation 和 transition 想做的事情都是一样, 通过控制属性变化的过程也, 实现动画; 都是立足于控制本身 dom 的 css 属性变化过程, 来实现动画的视觉效果。
2. 他们都有“持续时间”、“延迟时间” 和“时间缓动函数”等概念，这些都是用来控制动效的效果。
5.总结
通常情况下，transform 会与 transition 或 animation 结合使用，例如使用 transition 来实现平滑的旋转效果 (transition: transform 2s ease;)，或者使用 animation 来创建更复杂的位移动画。 单独使用 transform 只会改变元素的最终状态，而不会产生动画效果。
