HTML中@keyframes用法

最新推荐文章于 2025-05-08 11:30:00 发布

琼06

最新推荐文章于 2025-05-08 11:30:00 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Ving_x/article/details/103109285

本文详细解析了CSS动画中@keyframes的使用方法，包括如何定义动画名称、设置动画时长百分比及应用CSS样式属性，是前端开发者掌握网页动画效果的必备指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@keyframes animationname {keyframes-selector {css-styles;}}
其中需要的属性设置
animationname 必需。定义动画的名称。
keyframes-selector
必需。动画时长的百分比。

合法的值：

0-100%
from（与 0% 相同）
to（与 100% 相同）
css-styles 必需。一个或多个合法的 CSS 样式属性。

tips，可以只写成50%{keyframes-selector {css-styles;}}的形式

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

琼06

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

在html5中关键帧属性的描述,CSS动画属性关键帧keyframes全解析

weixin_36440198的博客

06-05

1658

大概有多久没有更新专栏文章了。半年？下半年忙到起飞，或者毫不夸张的说是发射？仅有的一点个人时间，上半年贡献给了Python，现在差不多已忘掉了七七八八(一首《凉凉》送给自己)，下半年贡献给了JavaScript，终于鼓起勇气系统的开始学习JS了(换台，梁静茹《勇气》走起)。本来想一直等等等，等到webapi学完后放个大招，svg+CSS动画搭乘上JavaScript简直如虎添翼长驱直入。但是，看掘...

html中定义动画名字和规则,@keyframes

weixin_30038009的博客

06-10

2700

@keyframes版本：CSS3关键帧@keyframes at-rule 规则通过在动画序列中定义关键帧(或waypoints)的样式来控制CSS动画序列中的中间步骤。和转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。示例@keyframes slidein {from {transform: translateX(0%);}to {transform...

参与评论您还未登录，请先登录后发表或查看评论

html keyframes

fivestar2009的博客

09-24

852

html5 动画

万字详解CSS动画核心——@keyframes，看完就会做动画！

最新发布

2401_83607690的博客

05-08

2009

‌简单说@keyframes是CSS3的 ‌动画关键帧规则‌，就像导演给动画片分镜头一样，你可以定义动画在不同时间点的样式变化。‌举个栗子：开始时（0%）在左边结束时（100%）掌握@keyframes只需三步：1定义关键帧动画2 应用animation属性 3调试参数优化效果‌

关键帧动画html例子,关键帧 | @keyframes

weixin_36397256的博客

06-05

1458

关键帧 | @keyframes在CSS中，@keyframes根据你定义的样式规则来更有效的控制动画队列中的每一个中间步骤(或者每一个路径点)。用@keyframes来制定动画规则会比使用transition(过渡)来获得更细腻更全面的动画效果。@keyframes slidein {from {margin-left: 100%;width: 300%;}to {margin-left: 0%...

【CSS3】Keyframes介绍

O(∩_∩)O

02-24

1420

Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } } 在一个“@key

CSS 动画（@keyframes 和 animation 属性）初识

cuijiying的博客

01-22

1995

keyframes定义了动画的各个关键帧，控制元素的从一个状态到另一个状态的转换过程。@keyframes定义了动画的关键帧，通过控制元素的状态变换。animation用于应用动画并控制其属性，如持续时间、速度曲线、循环次数等。使用场景：常见场景包括加载动画、按钮交互、页面转场等。性能优化：使用transform和opacity属性进行动画，避免过多动画并使用提高性能。通过合理地使用 CSS 动画，能够为网页增加动感和互动性，提升用户体验。

CSS3 @keyframes简单动画实现

09-24

CSS3 @keyframes规则是CSS3中新增的一项功能，允许设计师和开发者通过在动画序列中定义关键帧（keyframes）来创建复杂的动画效果。这个功能的引入极大地丰富了网页设计的表现力和用户体验。要实现一个简单的CSS3动画...

使用css3的动画属性@keyframes创建小说轮播图

WT博客

04-20

2123

很多小说网站为了节省页面空间并且美化页面，常常使用小说封面的轮播展示效果，本文主要从实现这个效果方面提供一种思路，使用CSS的动画属性@keyframes实现小说封面轮播展示。

web前端入门到实战：CSS动画@keyframes的用法

软件开发-前端开发-IT

09-09

1599

CSS动画 CSS动画允许大多数HTML元素的动画，而无需使用JavaScript或Flash！动画浏览器支持 IE10+支持该属性的。其他低浏览器版本数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。什么是CSS动画？动画允许元素从一种样式逐渐变为另一种样式。您可以根据需要多次更改所需的CSS属性。要使用CSS动画，必须首先为动画指定一些关键帧。关键帧保持元...

@keyframes嵌套在@media中IE浏览器兼容问题

lyn1772671980的博客

04-20

3536

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>@keyframes嵌套在@media中IE浏览器兼容问题</title> <script src="./jquer

html keyframes无效,CSS3 中的@keyframes介绍

weixin_35780601的博客

06-10

1043

语法@keyframes animationname {keyframes-selector {css-styles;}}animationname 必需。定义动画的名称。keyframes-selector必需。动画时长的百分比。合法的值：0-100%from(与 0% 相同)to(与 100% 相同)css-styles 必需。一个或多个合法的 CSS 样式属性。定义和用法通过 @keyfra...

html动画执行什么规则,CSS动画@keyframes的用法

weixin_42502075的博客

06-07

974

CSS动画CSS动画允许大多数HTML元素的动画，而无需使用JavaScript或Flash！动画浏览器支持IE10+支持该属性的。其他低浏览器版本数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。什么是CSS动画？动画允许元素从一种样式逐渐变为另一种样式。您可以根据需要多次更改所需的CSS属性。要使用CSS动画，必须首先为动画指定一些关键帧。关键帧保持元素在特定时...

[CSS] @keyframes

weixin_30951743的博客

09-02

209

@keyframes swing{ 0% { transform: rotate(0deg)} 100% {transform: rotate(-30deg)} } #sweetlandia{ animation: swing 2s infinite ease-in-out; } Muli-st...

@keyframes

weixin_30532759的博客

07-12

183

通过 @keyframes 规则，您能够创建动画。 @keyframes movelike{ from{right:1205px;} to{right:0px}} 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。 ...

CSS3 -- @keyframes动画

qq_51248309的博客

05-04

7056

一篇文章教会你css3中的动画

关键帧（@keyframes）

qq_44158936的博客

03-20

2169

@keyframes 规则通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。这比转换更能控制动画序列的中间步骤。 1、语法 1.1、取值帧列表的名称。名称必须符合 CSS 语法中对标识符的定义。 from 等效于 0% to 等效于 100% 动画序列中，触发关键帧的时间点，使用百分值来表示。 1.2、语法格式 @keyframes <...

html5动画 ease,CSS动画：keyframes用法介绍

weixin_33402252的博客

06-07

1078

在CSS动画中，使用Transition技术是一种“隐式”的动画方法，而相对应的，还有一种“显式”的动画技术，就是，你可以在CSS里直接指定动画效果，这需要使用keyframes属性了。演示：秋叶飘落动画上面这个”秋叶飘落动画”的CSS动画演示应该是十分的精彩，充分展示了CSS动画的优异特性。下面我们来一步一步介绍如何制作keyframes动画，先从一个会弹跳的盒子入手。演示：会弹跳的盒子用CSS...

html二级菜单栏动画@keyframes

qq_48307365的博客

04-23

550

鼠标移入显示二级菜单栏 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { padding: 0; margin: 0; } .menu { margin: 0px auto; width: 1000px; bor.

css3@keyframes

03-12

### 使用 `@keyframes` 实现 CSS3 动画 #### 定义关键帧为了创建动画效果，首先需要定义一组关键帧。这些关键帧描述了目标元素在整个动画周期内的样式变化。通过使用 `@keyframes` 规则，可以精确设定各个阶段的目标状态。 ```css @keyframes example { from {background-color: red;} to {background-color: yellow;} } ``` 此代码片段展示了最简单形式的关键帧设置方法——仅指定了起始 (`from`) 和结束 (`to`) 状态下的背景颜色改变[^1]。对于更复杂的场景，则可以在中间添加额外的时间点： ```css @keyframes slidein { 0% { transform: translateX(0%); } 50% { transform: translateX(50%); } 100% { transform: translateX(100%); } } ``` 这里演示的是一个水平位移的过程，在整个过程中元素的位置逐渐向右移动直至完全离开视口范围[^4]。 #### 应用到 HTML 元素上有了上述定义好的关键帧之后，还需要告诉浏览器哪些 DOM 节点应该执行该动画以及具体的运行参数。此时就要借助于 `animation` 属性及其子属性来进行配置。 ```css div { width: 100px; height: 100px; background-color: pink; /* 将之前定义的名字为 'example' 的 keyframe 序列应用于此 div */ animation-name: example; /* 设置动画完成一次所需时间 */ animation-duration: 2s; /* 可选：指定动画重复次数，默认不循环 */ animation-iteration-count: infinite; } ``` 这段样式的含义是让宽度和高度均为100像素、背景色为粉色的矩形区域按照名为 `example` 的关键帧序列每隔两秒变换一次其背景色彩，并无限次地往复进行下去[^2]。 #### 创建渐变动画实例除了基本的颜色转换外，还可以利用 JavaScript 或者纯 CSS 来制作更加有趣的视觉体验。比如下面这个按钮点击后会产生彩虹般绚丽过渡的例子就是基于 `@keyframes` 结合伪类实现的[^5]。 ```html <button onclick="this.classList.toggle('rainbow')">Click me!</button> <style> .rainbow { transition: all .75s ease-in-out; } .rainbow:hover, .rainbow:focus { color: white; text-shadow: none; background-image: linear-gradient(to right, #ff9a9e,#fad0c4,#f8efac,#dfe9f3,#bdcfff); } </style> ``` 尽管这里的重点在于悬停时产生的线性梯度变化而非严格意义上的 `@keyframes` 动作，但是原理相同，都是通过对不同时间节点上的外观特征作出规定进而达成预期的效果展示。