在css中如何用@keyframes制作动画

使用@keyframes定义动画关键帧并应用animation属性实现css动画效果，如slideIn滑入、pulse脉冲等，通过设置持续时间、缓动函数、延迟和填充模式等参数控制动画行为。

在 CSS 中，使用 @keyframes 可以为元素创建动画效果。它定义了动画过程中的关键帧，也就是动画在不同时间点的样式状态。

1. 定义 @keyframes 动画

使用 @keyframes 后跟一个动画名称，然后在花括号中设置各个关键帧（如 0%、50%、100% 或 from/to）对应的样式：

@keyframes slideIn {   from {     transform: translateX(-100%);   }   to {     transform: translateX(0);   } }

上面的例子定义了一个名为 slideIn 的动画：元素从左侧外（左移100%自身宽度）滑动到正常位置。

2. 将动画应用到元素

通过 animation 属性把定义好的动画绑定到某个元素上：

立即学习“前端免费学习笔记（深入）”；

.animated-box {   width: 100px;   height: 100px;   background-color: blue;   animation: slideIn 2s ease-in-out 0.5s forwards; }

这里 animation 的参数依次是：

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

27

查看详情

• 动画名称：对应 @keyframes 定义的名字
• 持续时间：2秒完成动画
• 缓动函数：ease-in-out 表示先慢后快再慢
• 延迟时间：0.5秒后开始
• 填充模式：forwards 表示动画结束后保持最后一帧的样式

3. 使用百分比设置多关键帧

你可以用百分比精确控制动画过程中的多个状态：

@keyframes pulse {   0% {     opacity: 0.5;     transform: scale(1);   }   50% {     opacity: 1;     transform: scale(1.1);   }   100% {     opacity: 0.5;     transform: scale(1);   } }

这个脉冲动画会让元素先放大变不透明，再恢复原样，适合做提示效果。

4. 常用 animation 属性简写或单独设置

除了简写的 animation，也可以单独设置属性：

• animation-duration：动画持续时间
• animation-timing-function：速度曲线
• animation-delay：延迟启动
• animation-iteration-count：播放次数（可设数字或 infinite）
• animation-direction：播放方向（如 reverse, alternate）
• animation-fill-mode：动画外时间的样式（如 backwards, both）
• animation-play-state：控制暂停（paused）或运行（running）

基本上就这些。只要定义好关键帧，再应用到元素上，就能实现流畅的 CSS 动画。注意浏览器兼容性，一般现代浏览器都支持，必要时可加 -webkit- 前缀。

以上就是在css 浏览器 css动画 css webkit count function animation