跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

文章标签
keyframes

16 篇文章
{
,

}
文章“高性能可扩展动画:动态构建关键帧”的直链
动画 关键帧 requestAnimationFrame

高性能可扩展动画:动态构建关键帧

动画已经发展了很长一段时间,不断为开发者提供更好的工具。CSS 动画,尤其是在解决大多数用例方面奠定了基础。但是,有些动画需要稍微多一点……

Avatar of Bernardo Cardoso
Bernardo Cardoso 发表于 2020 年 4 月 2 日
文章“CSS 中的动画套娃”的直链
复选框技巧 css 动画 关键帧

CSS 中的动画套娃

这是一个有趣的话题。我们如何创建一个套娃的动画,让它们一个套一个……但用 CSS 实现呢?

我脑海中构思了这个想法一段时间。然后,我看到一个……

Avatar of Jhey Tompkins
Jhey Tompkins 发表于 2020 年 2 月 27 日
Animated gif. We start with a grey background and we have an orange pie slice (circular sector) growing from nothing to covering everything around the central point. Then we have a grey pie slice growing from nothing to covering everything around the central point and we're back where we started from: a grey background.
文章“使用 CSS 过渡和动画改变渐变的状态”的直链
css 动画 渐变 关键帧 过渡

使用 CSS 过渡和动画改变渐变的状态

早在 2012 年,Internet Explorer 10 发布了,除了其他功能外,它终于支持了 CSS 渐变,并且还可以使用纯 CSS 对其进行动画!当时没有其他浏览器支持这个功能,但我……

Avatar of Ana Tudor
Ana Tudor 发表于 2021 年 3 月 26 日
文章“CSS 动画与 Web 动画 API”的直链
关键帧 WAAPI Web 动画

CSS 动画与 Web 动画 API

JavaScript 中有一个用于动画的原生 API,称为 Web 动画 API。在这篇文章中,我们将称之为 WAAPI。MDN 上有关于它的良好文档,Dan Wilson 也有一篇很棒的文章系列。

在这篇文章中,……

Avatar of Ollie Williams
Ollie Williams 发表于 2018 年 8 月 18 日
文章“使用一组 CSS 关键帧动画到不同的最终状态”的直链
关键帧 粒子

使用一组 CSS 关键帧动画到不同的最终状态

我最近现场编码了一个纯 CSS 随机彩虹粒子爆炸效果。屏幕中间有一个源点,彩虹粒子以不同的速度在不同的时刻射出,然后逐渐消失。它可能看起来……

Avatar of Ana Tudor
Ana Tudor 发表于 2017 年 2 月 7 日
文章“使用 CSS 关键帧切换状态”的直链
动画 关键帧

使用 CSS 关键帧切换状态

假设您希望一个元素处于一种状态 9 秒,然后在另一种状态下持续 1 秒,并循环播放。

状态之间没有过渡,只是一个直接的切换……

Avatar of Chris Coyier
Chris Coyier 发表于 2016 年 11 月 22 日
文章“CSS 关键帧动画在迭代之间延迟”的直链
动画 CSS 关键帧

CSS 关键帧动画在迭代之间延迟

假设您希望一个动画运行 1 秒,然后延迟 4 秒再重新运行。看起来这应该很容易。事实证明,这并不简单,但可以实现。您需要伪造它……

Avatar of Chris Coyier
Chris Coyier 发表于 2016 年 7 月 20 日
  • 较新
  • 1
  • 2

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

通过我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费额度!
CSS-Tricks
  • 为我们撰稿!
  • 与我们合作广告
  • 联系我们
社交媒体
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.