css小小动画属性拿捏｜学习笔记还在为css中 transform、transition、animation 和 tra

一、前置了解：

在了解过渡之前，需要先了解 transform 属性，它用于对元素进行变形操作：

transform: 变形函数(参数);

常用变形函数：

translate(x,y) - 移动
scale(x,y) - 缩放
rotate(deg) - 旋转
skew(x,y) - 倾斜
matrix() - 矩阵变形

示例：

/* 水平移动100px，垂直移动50px */
transform: translate(100px, 50px);
/* 旋转45度 */
transform: rotate(45deg);

二、transition:（过渡）

是一种状态到另外一种状态的平滑处理

状态变化 ，样式过渡

1. 过渡属性

transition:[property] [duration] [timing-function] [delay];

transition:[属性名称] [持续时间] [时序函数-动画的速度曲线] [延迟时间];

property: 需要监听平滑过渡的属性，可以是width color background opacity
duration：动画完成的周期，例：1s

timing-function：动画的速度曲线

预设值	cubic-bezier 等价	介绍
`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)`	先加速，后减速

其他动画速度曲线：

cubic-bezier(n,n,n,n)：自定义贝塞尔曲线
steps(n, start/end)：分步动画

delay：动画延迟时间

💡 如果需要实现多种动画效果可以使用，分割，例如：
transition: width 0.5s ease, height 0.5s ease, opacity 0.3s linear;

2. 练一练

鼠标悬停区域变透明

<div class='block'></div>

.block {
  width: 100px;
  height: 100px;
  background-color: salmon;
  transition: opacity 0.5s ease-in-out;
}

.block:hover {
  opacity: 0.3;
}

三、animation:（动画）

CSS Animation 是一种使用 CSS 创建动画效果的技术，它允许你通过定义关键帧和动画属性来控制元素的动画表现，而无需使用 JavaScript。

主动触发，周期性 ，复杂的动画效果

1.@keyframes规则

创建动画序列

@keyframes xx{
		from {
		  /* 起始状态 */
		}
		to{
			/* 结束状态 */
		}
}

当然，除了这种固定两种状态，还可以通过百分比的形式进行：

0%（开始状态）~100%（结束状态）

@keyframes xx{
		0% {
		  /* 起始状态 */
		}
		50%{
			/* 中间状态 */
		}
		100%{
			/* 结束状态 */
		}
}

//或者是联合的方式
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

2. 动画属性

animation: [**duration**] [timing-function] [delay]
           [iteration-count] [direction] [fill-mode]
           [play-state] [**name**];
animation: [**时长**]  [时序函数-动画的速度曲线] [延迟] 
           [循环次数] [方向] [填充模式] 
           [播放状态] [**动画名称**];

**其中duration与name是必填项！！**

duration：动画完成的周期
timing-function：动画的速度曲线 (详细见Transition)
delay：动画延迟时间
iteration-count：动画播放的次数例：1，infinite(循环播放)
direction：
1. normal（默认）：正向播放
2. reverse：反向播放
3. alternate：奇数次正向播放，偶数次反向播放
4. alternate-reverse：奇数次反向播放，偶数次正向播放

fill-mode：控制动画前后的样式

值	描述	示意图	适用场景
`none` (默认)	动画未执行时不应用样式动画结束后恢复初始状态	`[初始] → [动画] → [初始]`	需要完全还原的状态
`forwards`	动画结束后保持最后一帧的样式	`[初始] → [动画] → [结束]`	弹窗出现、元素移入后保持
`backwards`	立即应用第一帧样式（即使有 delay）	`[开始] → [动画] → [初始]`	避免延迟时的闪烁
`both`	同时应用 `forwards` 和 `backwards`	`[开始] → [动画] → [结束]`	需要完美控制始终状态

💡 什么时候用both，什么时候用forwards

涉及 反向动画 或 交替动画 → 优先考虑 both

只需 保持结束状态 → 选择 forwards

需要 立即应用初始状态 → 选择 both

play-state：控制动画的状态
1. running : 执行
2. pause：暂停
name：指定的@keyframes名称

3. 练一练

解释代码内容：

animation: 3s ease-in 1s infinite reverse both running slidein;

动画时间三秒慢进一秒延迟循环播放反向播放前后状态保持执行滑入

小球从上往落下并反弹（简单效果）：

.ball {
  position: fixed;
  background-color: aquamarine;
  //隐藏小球
  top: -50px;
  width: 50px;
  height: 50px;
  border-radius: 50px;

  //需要一个越来越快的效果
  animation: 3s cubic-bezier(0.1, 0.1, 0.9, 0.1) infinite bounce;
}

@keyframes bounce {
  0% {
	  /* 起始位置 */
    top: -50px;
    transform: scale(1, 1);
  }

  45% {
    /* 第一次落地 */
    top: calc(100vh - 50px);
    /* 触底变形 */
    transform: scale(1.1, 0.9);
  }

  50% {
	   /* 弹跳最高点 */
    top: calc(100vh - 100px);
    transform: scale(0.95, 1.05);
  }

  70% {
    /* 第二次落地 */
    top: calc(100vh - 50px);
    transform: scale(1.05, 0.95);
  }

  75% {
    /* 第二次反弹（更小衰减） */
    top: calc(100vh - 60px);
    transform: scale(0.98, 1.02);
  }

  90% {
    /* 第三次落地 */
    top: calc(100vh - 50px);
    transform: scale(1.02, 0.98);
  }

  100% {
    /* 最终静止 */
    top: calc(100vh - 50px);
    transform: scale(1, 1);
  }

四、额外知识点

1. 性能优化建议：

在配置 transition 和 animation（如优先使用 transform 和 opacity 动画，避免触发重排）。

2. 对比 transition 和 animation 的适用场景

特性	`transition`	`animation`
触发方式	需要状态变化（如 hover）	自动或手动触发
复杂度	简单两状态过渡	多关键帧复杂动画
循环播放	不支持	支持