HTML中@keyframes用法

本文详细解析了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;}}的形式

### 使用 `@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` 动作,但是原理相同,都是通过对不同时间节点上的外观特征作出规定进而达成预期的效果展示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值