当前位置： 首页 > article >正文

CSS Animation 详解

article 2025/6/4 0:19:11

CSS Animation 允许元素平滑地从一个样式状态过渡到另一个样式状态。通过设置关键帧（keyframes），可以控制动画序列中的中间步骤。

一、核心概念

1.关键帧（Keyframes）

  1. 使用 @keyframes 规则定义动画序列
  2. 通过百分比或 from/to 指定动画阶段
  3. 每个阶段可以设置元素的样式属性

2.动画属性

  1. animation-name: 指定关键帧名称
  2. animation-duration: 动画持续时间（秒或毫秒）
  3. animation-delay: 动画延迟开始时间
  4. animation-iteration-count: 循环次数（数字或 infinite）
  5. animation-direction: 动画方向（normal, reverse, alternate）
  6. animation-timing-function: 速度曲线（ease, linear, ease-in-out）
  7. animation-fill-mode: 动画前后的状态（forwards, backwards, both）
  8. animation-play-state: 动画播放状态（running, paused）

3.示例代码

下面是一个包含多种动画效果的完整示例：

html

预览

<!DOCTYPE html>
<html>
<head>
<style>
/* 基础样式 */
.container {width: 500px;height: 300px;border: 1px solid #ccc;margin: 20px auto;position: relative;
}/* 1. 简单移动动画 */
.box {width: 50px;height: 50px;background: #3498db;position: absolute;top: 20px;/* 应用动画 */animation: move 3s infinite;
}@keyframes move {0% { left: 20px; }50% { left: 430px; }100% { left: 20px; }
}/* 2. 旋转+透明度变化 */
.circle {width: 40px;height: 40px;background: #e74c3c;border-radius: 50%;position: absolute;top: 100px;left: 20px;animation: rotateAndFade 4s infinite linear;
}@keyframes rotateAndFade {0% { transform: rotate(0deg); opacity: 1; }50% { opacity: 0.3; }100% { transform: rotate(360deg); opacity: 1; }
}/* 3. 弹跳动画 */
.ball {width: 30px;height: 30px;background: #2ecc71;border-radius: 50%;position: absolute;top: 180px;left: 20px;animation: bounce 1s infinite alternate ease-in;
}@keyframes bounce {to {top: 220px;height: 25px;}
}/* 4. 悬停触发动画 */
.button {position: absolute;top: 240px;left: 20px;padding: 10px 20px;background: #9b59b6;color: white;border-radius: 5px;text-align: center;cursor: pointer;transition: all 0.3s;
}.button:hover {animation: pulse 1s infinite;
}@keyframes pulse {0% { transform: scale(1); }50% { transform: scale(1.05); }100% { transform: scale(1); }
}/* 5. 复杂动画序列 */
.combo {width: 40px;height: 40px;background: #f39c12;position: absolute;top: 100px;left: 440px;animation: combo 6s infinite;
}@keyframes combo {0% { transform: translate(0, 0) rotate(0deg); }25% { transform: translate(-200px, 0) rotate(90deg); }50% { transform: translate(-200px, 100px) rotate(180deg); }75% { transform: translate(0, 100px) rotate(270deg); }100% { transform: translate(0, 0) rotate(360deg); }
}</style>
</head>
<body><div class="container"><div class="box"></div><div class="circle"></div><div class="ball"></div><div class="button">Hover Me</div><div class="combo"></div>
</div></body>
</html>

二、高级技巧

1.多动画组合

css

.element {animation: fadeIn 1s,slideUp 0.8s ease-out,pulse 3s 2s infinite;
}

  1. 动画事件监听（JavaScript）

    javascript

    const element = document.querySelector('.box');element.addEventListener('animationstart', () => {console.log('动画开始');
});element.addEventListener('animationend', () => {console.log('动画结束');
});element.addEventListener('animationiteration', () => {console.log('动画循环一次');
});

  2. 使用 cubic-bezier 自定义速度曲线

    css

    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

三、浏览器兼容性

大多数现代浏览器都支持 CSS Animation，但建议添加前缀以确保兼容性：

css

.element {-webkit-animation: fadeIn 1s; /* Safari 4+ */-moz-animation: fadeIn 1s; /* Firefox 5+ */-o-animation: fadeIn 1s; /* Opera 12+ */animation: fadeIn 1s; /* Chrome, IE 10+ */
}

CSS Animation 为网页添加了丰富的交互体验，合理使用可以增强用户体验而不会造成干扰。

相关文章：

CSS Animation 详解

CSS Animation 允许元素平滑地从一个样式状态过渡到另一个样式状态。通过设置关键帧&#xff08;keyframes&#xff09;&#xff0c;可以控制动画序列中的中间步骤。 一、核心概念 1.关键帧&#xff08;Keyframes&#xff09; 使用 keyframes 规则定义动画序列通过百分比或 …...

编程日记 2025/6/4 0:19:11

LabVIEW 中内存释放相关问题

在LabVIEW 编程领域&#xff0c;内存管理是一个关键且复杂的议题。我们常常关注 LabVIEW 如何将内存释放回操作系统&#xff08;OS&#xff09;&#xff0c;以及是否有方法确保在特定数据结构&#xff08;如队列、变体属性、动态数据引用 DVR 等&#xff09;销毁、删除或清空后…...

编程日记 2025/6/3 23:27:33

【HarmonyOS 5】鸿蒙中的UIAbility详解（三）

【HarmonyOS 5】鸿蒙中的UIAbility详解&#xff08;三&#xff09; 一、前言 本文是鸿蒙中的UIAbility详解系列的最终章。主要针对UIAbility的冷启动和热启动&#xff0c;对于want数据的处理。UIAbility的备份恢复&#xff0c;UIAbility的接续等高级功能的概念和使用讲解。 …...

编程日记 2025/6/3 19:41:40

基于内存高效算法的 LLM Token 优化：一个有效降低 API 成本的技术方案

在使用 OpenAI、Claude、Gemini 等大语言模型 API 构建对话系统时&#xff0c;开发者普遍面临成本不断上升的挑战。无论是基于检索增强生成&#xff08;RAG&#xff09;的应用还是独立的对话系统&#xff0c;这些系统都需要维护对话历史以确保上下文的连贯性&#xff0c;类似于…...

编程日记 2025/6/3 20:14:02

vue-11（命名路由和命名视图）

命名路由和命名视图 命名路由和命名视图提供了组织和导航 Vue.js 应用程序的强大方法&#xff0c;尤其是在它们的复杂性增加时。它们提供了一种语义更合理、可维护的路由方法&#xff0c;使您的代码更易于理解和修改。命名路由允许您按名称引用路由&#xff0c;而不是依赖 URL…...

编程日记 2025/6/4 0:30:00

（附代码）自定义 LangChain 文档分割器，深入探索 LangChain 文档分割策略与应用

自定义文档分割器 在 LangChain 中&#xff0c;如果内置的文档分割器均没办法完成需求&#xff0c;还可以根据特定的需求实现自定义文档分割器&#xff08;一般极少&#xff09;&#xff0c;实现的方法也非常简单&#xff0c;继承文本分割器基类 TextSplitter&#xff0c;在构造…...

编程日记 2025/6/3 20:51:36

Python打卡训练营Day42

DAY 42 Grad-CAM与Hook函数 知识点回顾 回调函数lambda函数hook函数的模块钩子和张量钩子Grad-CAM的示例 作业&#xff1a;理解下今天的代码即可 import torch import torch.nn as nn import torch.nn.functional as F import torchvision import torchvision.transforms as tr…...

编程日记 2025/6/4 0:32:55

基于微信小程序的scratch学习系统

博主介绍&#xff1a;java高级开发&#xff0c;从事互联网行业六年&#xff0c;熟悉各种主流语言&#xff0c;精通java、python、php、爬虫、web开发&#xff0c;已经做了六年的毕业设计程序开发&#xff0c;开发过上千套毕业设计程序&#xff0c;没有什么华丽的语言&#xff0…...

编程日记 2025/6/3 23:55:33

MATLAB实战：机器学习分类回归示例

以下是一个使用MATLAB的Statistics and Machine Learning Toolbox实现分类和回归任务的完整示例代码。代码包含鸢尾花分类、手写数字分类和汽车数据回归任务&#xff0c;并评估模型性能。 %% 加载内置数据集 % 鸢尾花数据集&#xff08;分类&#xff09; load fisheriris; X_i…...

编程日记 2025/6/3 20:03:51

动态库导出符号与extern “C“

1. windows下动态库导出符号 根据C/C语法规则&#xff0c;函数声明中的修饰符&#xff08;如__declspec(dllexport)&#xff09;可以放在返回类型之前或返回类型之后、函数名之前。这两种方式在功能上是等价的&#xff0c;编译器会以相同的方式处理。 __declspec(dllexport) …...

编程日记 2025/6/3 6:29:35

小知识：STM32 printf 重定向（串口输出）--让数据 “开口说话” 的关键技巧

引言 在 C 语言开发中&#xff0c;printf函数是我们调试程序、输出数据的得力助手&#xff0c;它能将格式化的数据输出到标准输出设备&#xff08;通常是屏幕&#xff09;。然而&#xff0c;在嵌入式领域&#xff0c;STM32 单片机并没有默认的显示设备&#xff0c;要让printf函…...

编程日记 2025/6/3 19:42:22

`docker commit` 和 `docker save`区别

理解 docker commit 和 docker save 之间的区别对于正确管理 Docker 镜像非常重要。让我们详细解释一下这两个命令的作用及其区别。 1. docker commit 作用&#xff1a; docker commit roop-builder roop:v1 命令的作用是基于一个正在运行的容器 roop-builder 创建一个新的镜…...

编程日记 2025/6/3 21:12:08

【C++ 多态】—— 礼器九鼎，釉下乾坤，多态中的 “风水寻龙诀“

欢迎来到一整颗红豆的博客✨&#xff0c;一个关于探索技术的角落&#xff0c;记录学习的点滴&#x1f4d6;&#xff0c;分享实用的技巧&#x1f6e0;️&#xff0c;偶尔还有一些奇思妙想&#x1f4a1; 本文由一整颗红豆原创✍️&#xff0c;感谢支持❤️&#xff01;请尊重原创…...

编程日记 2025/6/3 13:49:29

SCSAI平台面向对象建模技术的设计与实现

一、核心设计思想 SCSAI平台的核心目标是通过元建模&#xff08;Meta-Modeling&#xff09;技术实现面向对象建模的零编码化。其核心思想为&#xff1a; 自反性设计&#xff1a;定义ObjectClassInfo (OCI)为元类&#xff08;Meta-Class&#xff09;&#xff0c;所有对象类均为…...

编程日记 2025/6/4 0:18:43

pikachu通关教程-CSRF

CSRF(get) 用bp进行抓包 选择action value值的修改 点击test in browser copy然后放在bp代理的浏览器上&#xff0c;会出现一个提交按钮&#xff0c;这时候点击之后信息就被修改了。 CSRF(post) 请求的方式不同&#xff0c;其他都是一样 CSRF Token 存在cookie 首先要先下载一…...

编程日记 2025/6/3 21:54:06

智能体觉醒：AI开始自己“动手”了-自主进化开启任务革命时代

1. 智能体&#xff1a;AI从“工具”到“伙伴”的关键跃迁 1.1 什么是智能体&#xff1f; 智能体&#xff08;Agent&#xff09;是AI的“进化版”——它不再局限于生成文字或图像&#xff0c;而是能像人类一样“规划任务”“调用工具”甚至“协同合作”。例如&#xff0c;一个…...

编程日记 2025/6/3 15:57:40

Python爬虫实战：研究Aiohttp库相关技术

1. 引言 1.1 研究背景与意义 随着互联网的快速发展，网络上的数据量呈爆炸式增长。爬虫作为一种自动获取网络信息的工具，在数据挖掘、信息检索、舆情分析等领域有着广泛的应用。传统的同步爬虫在面对大量 URL 时效率低下，无法充分利用现代计算机的多核资源和网络带宽。而异…...

编程日记 2025/6/3 7:34:10

【C++指南】C++ list容器完全解读（二）：list模拟实现，底层架构揭秘

. &#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《C指南》 期待您的关注 文章目录 引言一、链表节点设计&#xff1a;双向链表的基石1.1 节点类的实现 二、list框架与核心成员函…...

编程日记 2025/6/3 22:04:21

[神经网络]使用olivettiface数据集进行训练并优化，观察对比loss结果

结合归一化和正则化来优化网络模型结构&#xff0c;观察对比loss结果 搭建的神经网络&#xff0c;使用olivettiface数据集进行训练&#xff0c;结合归一化和正则化来优化网络模型结构&#xff0c;观察对比loss结果 from sklearn.datasets import fetch_olivetti_faces #倒入数…...

编程日记 2025/6/3 7:14:55

小明的Java面试奇遇之智能家装平台架构设计与JVM调优实战

一、文章标题 小明的Java面试奇遇之智能家装平台架构设计与JVM调优实战 二、文章标签 Java面试, 智能家装, 微服务架构, 高并发设计, JVM调优, SpringCloud, 消息队列, 分布式缓存, 架构设计, 面试技巧 三、文章概述 本文模拟了程序员小明应聘智能家装平台后端架构师的5轮…...

编程日记 2025/6/3 9:09:03

n8n：技术团队的智能工作流自动化助手

在当前数字化时代，自动化已经成为提高效率和减轻人工工作负担的一大推动力。今天，我们要为大家介绍一款极具潜力的开源项目——n8n，它不仅拥有广泛的应用场景，还具备内置AI功能，能够完全满足技术团队的高效工作需求。n8n的出现，为技术团队提供了自由编程与快速自动化构建…...

编程日记 2025/6/3 22:17:02

Flink 核心机制与源码剖析系列

Flink 核心机制与源码剖析系列 目录 第一篇&#xff1a;Flink 状态管理原理与源码深度剖析第二篇&#xff1a;水位线、事件时间与定时器源码全流程第三篇&#xff1a;Flink CEP 模式建模与高效事件匹配机制 第一篇&#xff1a;Flink 状态管理原理与源码深度剖析 1. 背景与意…...

编程日记 2025/6/3 22:09:25

华院计算出席信创论坛，分享AI教育创新实践并与燧原科技共同推出教育一体机

5月21日&#xff0c;信创论坛于上海漕河泾会议中心举办。本次论坛以“聚力融合&#xff0c;繁荣生态”为主题&#xff0c;话题聚焦工业制造、交通运输、金融、教育、医疗等领域。华院计算技术&#xff08;上海&#xff09;股份有限公司&#xff08;以下简称“华院计算”&#x…...

编程日记 2025/6/3 8:31:49

华为OD机试真题——会议接待 /代表团坐车（2025A卷：200分）Java/python/JavaScript/C++/C语言/GO六种最佳实现

2025 A卷 200分 题型 本文涵盖详细的问题分析、解题思路、代码实现、代码详解、测试用例以及综合分析； 并提供Java、python、JavaScript、C++、C语言、GO六种语言的最佳实现方式！ 本文收录于专栏：《2025华为OD真题目录+全流程解析/备考攻略/经验分享》 华为OD机试真题《会议…...

编程日记 2025/6/3 23:50:20

LabVIEW Val (Sgnl) 属性

在 LabVIEW 事件驱动架构中&#xff0c;Val (Sgnl) 属性&#xff08;Value (Signaling)&#xff09;是实现编程触发与用户交互行为一致性的关键技术。与普通 Value 属性不同&#xff0c;Val (Sgnl) 在修改控件值的同时强制生成值改变事件&#xff0c;确保程序逻辑与 UI 交互保持…...

编程日记 2025/6/3 10:01:00

STM32G4 电机外设篇（三） TIM1 发波 和 ADC COMP DAC级联

目录 一、STM32G4 电机外设篇&#xff08;三&#xff09; TIM1 发波 和 ADC COMP DAC级联1 TIM1 高级定时器发波1.1 stm32cubemx配置 2 TIM1 ADC COMP DAC级联2.1 stm32cubemx配置 附学习参考网址欢迎大家有问题评论交流 (* ^ ω ^) 一、STM32G4 电机外设篇&#xff08;三&…...

编程日记 2025/6/3 22:14:11

DAY 35 超大力王爱学Python

知识点回顾&#xff1a; 三种不同的模型可视化方法&#xff1a;推荐torchinfo打印summary权重分布可视化进度条功能&#xff1a;手动和自动写法&#xff0c;让打印结果更加美观推理的写法&#xff1a;评估模式 作业&#xff1a;调整模型定义时的超参数&#xff0c;对比下效果。…...

编程日记 2025/6/3 19:59:16

【数据结构】图的存储(十字链表)

弧节点 tailvex数据域&#xff1a;存储弧尾一端顶点在顺序表中的位置下标&#xff1b;headvex 数据域&#xff1a;存储弧头一端顶点在顺序表中的位置下标&#xff1b;hlink 指针域&#xff1a;指向下一个以当前顶点作为弧头的弧&#xff1b;tlink 指针域&#xff1a;指向下一个…...

编程日记 2025/6/3 23:50:20

005 flutter基础，初始文件讲解（4）

书接上回&#xff0c;今天继续完成最后的讲解&#xff1a; class _MyHomePageState extends State<MyHomePage> {int _counter 0;void _incrementCounter() {setState(() {_counter;});}可以看到&#xff0c;这里的_MyHomePageState是一个类&#xff0c;继承于 State&l…...

编程日记 2025/6/3 15:31:24

Redis最佳实践——秒杀系统设计详解

基于Redis的高并发秒杀系统设计&#xff08;十万级QPS&#xff09; 一、秒杀系统核心挑战 瞬时流量洪峰&#xff1a;100万 QPS请求冲击库存超卖风险&#xff1a;精准扣减防止超卖系统高可用性&#xff1a;99.99%服务可用性要求数据强一致性&#xff1a;库存/订单/支付状态同步…...

编程日记 2025/6/3 8:39:54