当前位置：首页 > 文章列表 > 文章 > 前端 > CSS@keyframes动画使用教程

CSS@keyframes动画使用教程

2025-11-23 17:01:31 0浏览收藏

**CSS动画入门：掌握@keyframes的关键技巧** 想让你的网页动起来吗？CSS中的`@keyframes`规则是实现动画效果的核心！本文将详细讲解如何使用`@keyframes`定义动画，包括命名动画、设置关键帧（如0%到100%或`from`/`to`），以及描述元素在不同阶段的样式变化。通过`animation`属性，你可以轻松将动画绑定到元素，并控制动画的持续时间、延迟、播放次数等。掌握`animation`复合属性的简写方式，更能高效实现滑入、淡入等各种炫酷效果。别忘了添加`-webkit-`前缀，以确保在旧版浏览器上的兼容性。立即学习，让你的网页充满活力！

使用@keyframes定义动画需先命名并设置关键帧，如0%到100%或from/to，描述样式变化过程；再通过animation属性将动画绑定到元素，可设置持续时间、延迟、次数等，也可简写为animation复合属性，实现如滑入、淡入等效果，并注意添加-webkit-前缀以兼容旧版浏览器。

在css中如何使用@keyframes定义动画

在CSS中使用@keyframes定义动画，主要是为了描述元素从一种样式状态过渡到另一种样式的过程。通过给动画命名并设置关键帧（如0%、50%、100%），可以精确控制动画每一阶段的样式表现。

定义@keyframes动画

使用@keyframes规则时，先为动画起一个名字，然后在花括号内设置各个关键帧的样式：

@keyframes slideIn { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }

上面的例子定义了一个名为slideIn的动画：元素从左侧外移入，并由透明变为不透明。

将动画应用到元素

定义好动画后，需要使用animation属性或其子属性将其绑定到具体元素上：

.animated-box { width: 100px; height: 100px; background: blue; animation-name: slideIn; animation-duration: 2s; animation-timing-function: ease-out; animation-delay: 0.5s; animation-iteration-count: 1; animation-fill-mode: forwards; }

也可以简写为：

.animated-box { animation: slideIn 2s ease-out 0.5s 1 forwards; }