Html-CSS动画 - 技术栈

CSS动画技术指南

CSS动画是通过CSS技术控制页面元素属性变化的实现方式。相比JavaScript动画，CSS动画具有以下优势：

如何鼠标移到指定位置出现盒子

过渡(transition)用于指定属性变化时的平滑切换方式：

transition-property

指定参与过渡的属性：
- none：无过渡效果
- all：所有属性参与过渡（默认）
- property：自定义属性列表（逗号分隔）
注意：
- 所有数值类型属性均可参与过渡（width/height/left/top等）
- 需在有效数值间进行过渡
transition-duration

指定过渡持续时间（必填）

单位：s（秒）或ms（毫秒）
transition-timing-function

控制过渡变化曲线（可选）：
- ease：默认值（慢→快→慢）
- linear：匀速
- ease-in：慢→快
- ease-out：快→慢
- ease-in-out：慢→快→慢
- steps()：分步过渡
- cubic-bezier(n,n,n,n)：贝塞尔曲线（0-1值）
transition-delay

设置过渡延迟时间（可选）

单位：s或ms
transition

简写属性，可同时设置以上所有属性（可选）

与过渡不同，动画可自动触发，无需属性变化。

关键帧设置方法：

css 复制代码

/* 方法一 */
@keyframes 名称 {
  from {初始状态}
  to {结束状态}
}

/* 方法二 */
@keyframes 名称 {
  0% {初始状态}
  50% {中间状态}
  100% {结束状态}
}

注意：

animation-name

绑定关键帧名称（必填），可设置多个动画（逗号分隔）
animation-duration

动画持续时间（必填）

单位：s或ms
animation-timing-function

动画速度曲线（与过渡相同）
animation-delay

动画延迟时间
animation-iteration-count

播放次数：
- n：具体次数
- infinite：无限循环
animation-direction

播放方向：
- normal：默认（from→to）
- reverse：to→from
- alternate：正向+反向交替
- alternate-reverse：反向+正向交替
animation-fill-mode

动画非播放时的元素样式：
- none：默认（恢复初始）
- forwards：保持结束状态
- backwards：保持初始状态
- both：结合两者
animation-play-state

控制动画状态：
- running：播放（默认）
- paused：暂停
animation

简写属性，可包含以上所有属性值

css 复制代码

transform: translate(x,y);

css 复制代码

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

css 复制代码

transform: rotate(角度);

css 复制代码

transform: scale(x, y);

css 复制代码

transform: skew(x-angle, y-angle);

css 复制代码

transform-origin: x-axis y-axis;