CSS3 动画基础与技巧

CSS3动画允许你创建平滑、高性能的动画效果,无需JavaScript。主要通过@keyframes和animation属性实现。以下是详细指南:

1. 基础动画语法

css 复制代码
/* 定义关键帧动画 */
@keyframes example {
  0%   { background: red; }
  50%  { background: yellow; }
  100% { background: green; }
}

/* 应用动画 */
.element {
  animation: example 3s ease-in-out infinite;
}

2. 关键属性

属性 描述 示例值
animation-name 动画名称 example
animation-duration 动画时长 2s / 400ms
animation-timing-function 速度曲线 ease, linear, cubic-bezier(0.1, 0.7, 1.0, 0.1)
animation-delay 开始延迟 1s
animation-iteration-count 重复次数 3, infinite
animation-direction 播放方向 normal, reverse, alternate
animation-fill-mode 结束状态保留 forwards, backwards

3. 常用动画示例

淡入淡出

css 复制代码
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.element {
  animation: fade 1.5s ease-in;
}

移动元素

css 复制代码
@keyframes move {
  0%   { transform: translateX(0); }
  100% { transform: translateX(200px); }
}

旋转

css 复制代码
@keyframes spin {
  to { transform: rotate(360deg); }
}
.element {
  animation: spin 2s linear infinite;
}

缩放效果

css 复制代码
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

4. 复合动画(多个动画同时运行)

css 复制代码
.element {
  animation: 
    pulse 1.5s infinite,
    move 3s alternate;
}

5. 进阶技巧

使用steps()实现逐帧动画

css 复制代码
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

.text {
  animation: typing 4s steps(40) infinite;
}

暂停/播放动画

css 复制代码
.element {
  animation-play-state: paused; /* 通过JS控制 */
}

.element:hover {
  animation-play-state: running;
}

6. 性能优化

  • 优先使用 transform 和 opacity(不会触发重排)
  • 避免动画阻塞主线程:使用 will-change: transform;
  • 硬件加速:对移动元素添加 transform: translateZ(0);

7. 浏览器兼容前缀

css 复制代码
@-webkit-keyframes example { ... }
.element {
  -webkit-animation: example 2s;
          animation: example 2s;
}

完整示例:弹跳球效果

html 复制代码
<div class="ball"></div>

<style>
.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(red, orange);
  animation: bounce 1s cubic-bezier(0.5, 0.05, 0.5, 1) infinite alternate;
}

@keyframes bounce {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-100px); }
}
</style>
相关推荐
不太可爱的叶某人32 分钟前
【学习笔记】MySQL技术内幕InnoDB存储引擎——第5章 索引与算法
笔记·学习·mysql
LuciferHuang1 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing1 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20151 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言2 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手2 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言3 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
你的人类朋友4 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手4 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3