开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

按下按钮后在CSS中切换关键帧？

在CSS中切换关键帧是通过使用动画和关键帧（keyframes）来实现的。关键帧是定义动画中每个阶段的样式的关键点。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes myAnimation {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: blue;}
}

.button {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: myAnimation 3s infinite;
}

.button:hover {
  animation-play-state: paused;
}
</style>
</head>
<body>

<div class="button"></div>

</body>
</html>

在上面的代码中，我们定义了一个名为myAnimation的关键帧动画，它在0%、50%和100%的时间点分别设置了不同的背景颜色。然后，我们创建了一个具有button类的div元素，并将动画应用于它。动画将以3秒的持续时间无限循环播放。

当鼠标悬停在按钮上时，我们使用animation-play-state属性将动画的播放状态设置为暂停，从而实现切换关键帧的效果。

这种技术可以应用于各种场景，例如在网页中创建动态的按钮、菜单、轮播图等。腾讯云提供了丰富的云计算产品，如云服务器、云数据库、云存储等，可以帮助开发者构建稳定、可靠的云计算解决方案。你可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多相关产品和服务的详细信息。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

前端动效讲解与实战

本文将从各个角度来对动画整个体系进行分类，并且介绍各种前端动画的实现方法，最后我们将总结在实际开发中的各个场景的动画选择方案。

03

我至今没想到，我也能在 CSS 中实现 SVG 动画了

动画是网络中不可或缺的一部分。与互联网早期使用 GIF 图像不同，现在的动画更加细腻和高雅。设计师和前端开发者利用动画使网站看起来更加精致，不仅提升用户体验，还吸引用户关注重要的元素，以传达信息。

01

是的！Figma也可以用时间轴做超级流畅的动画了

静电说：继昨天我们发布了Figma下的一款超神奇的抠图插件后，今天静电再次为大家带来一款Motion插件，它可以在Figma中做帧动画。在通常情况下，Figma中是没有时间轴的，因此只能使用Smart Animate做一些补间过渡动画，而要做一些更流畅且具有更多细节的动画，Figma则显得有点无奈。不过没关系，今天，我们为大家介绍使用Motion插件在Figma中来完成超流畅动画的案例。一起来看Pavel Babkin的这篇文章。

04

Web高性能动画及渲染原理（1）CSS动画和JS动画

Web动画的本质是元素状态改变造成的样式变更，CSS动画和JS动画的区别并不是由语言来决定的，而是由两者的特点和适用场景来判断的。CSS动画简洁高效，提升交互体验而编写的代码可以轻松地和主要业务逻辑之间实现隔离，开发中建议优先使用；而当你需要更丰富的缓动函数，多对象关联动画或是需要在动画执行的特定时间点关联一些其他的业务逻辑等需要细节控制的场景中，JS动画就会显得更加清晰且易维护，两者从来都不是非黑即白的选项。

03

CSS基础-CSS3过渡与动画

在网页设计领域，CSS3的过渡（Transitions）与动画（Animations）为开发者提供了强大的视觉效果工具，让页面元素的动态变化变得更加平滑和吸引人。本文将深入浅出地讲解CSS3过渡与动画的基本概念、常见应用场景、易错点以及如何有效避免这些问题，并通过实际代码示例加深理解。

01

animation

因为渲染引擎可以通过跳帧（frame-skipping）及其它技术来确保性能尽量流畅

01

给单元素艺术添加动画

原文：Animating Single Div Art 翻译：nzbin 导读：学习工具的最好的方法就是尝试新技术，本文通过“单元素艺术”介绍了 CSS 变量的使用以及给单元素添加动画的几种方法。通过学习作者编写的复杂的“单元素”示例，相信你对 CSS 变量以及 CSS 动画会有一个深刻的认识。如果你深入挖掘你的工具，你可以使用最基本的 HTML 做一些令人称奇的东西。我对 Lynn Fisher 以及其他人的“单元素艺术”（“Single Div Art”）印象深刻，所谓“单元素艺术”就是你可以使用一个

05

《小白H5成长之路28》用CSS3和jQuery实现简单的右下角弹窗

“小白，我们接着说CSS3动画的事情吧！今天上午你了解了一下关键帧keyframes，已经可以实现一些打开页面后自动执行的动画效果，现在我们试试通过jQuery动态给容器添加CSS3动画。” “为什么要动态添加呢？” “有时我们并不希望打开页面就执行一个动画，而是希望通过用户的点击或者鼠标移到某个元素上再触发对应的CSS3动画。你有没有发现，现在很多网站的图片鼠标移上去图片会稍微变大一点，鼠标移开后图片又会变回去，这些都是通过动态添加CSS3动画实现的。你能试着口头描述一下我刚说的图片效果是怎么实现的么

06

动画：从 AE 到 Web，‘甩锅’给设计师

接下来因工作调整，应该就很少接触 H5 开发了。借此机会总结对动画的一些个人思考。

00

创造引人入胜的网页体验：掌握 CSS 动画

在现代网页设计中，动画是一个强大的工具，可以为您的网页增添生气和互动性。它不仅可以吸引用户的注意力，还可以提升用户体验并传达信息。而 CSS 动画正是实现这一目标的关键。本文将深入探讨 CSS 动画，让您掌握它的精髓，为您的网页创造引人入胜的用户体验。

05

深入浅出 CSS 动画

本文将比较全面细致的梳理一下 CSS 动画的方方面面，针对每个属性用法的讲解及进阶用法的示意，希望能成为一个比较好的从入门到进阶的教程。

04

FFmpeg从入门到精通笔记之四[通俗易懂]

介绍在FFmpeg环境下使用libx264进行H.264(AVC)软编码的操作，H.265(HEVC)的编码操作使用的是libx265，但是参数基本类似。

02

一文详解ORB-SLAM3中的地图管理

想要理解ORB-SLAM3的地图管理，仅看ORB-SLAM3的论文[3]是不够的，因为很多细节出现在之前的ORB-SLAM1/2[1][2]，以及ORB-Atlas[4]这几篇论文中。从头到尾搞清楚这些论文中采用的地图管理方法，就能理解ORB-SLAM3中的内容。本文介绍这几篇论文中涉及地图的部分，并不介绍特征跟踪、关键帧创建等内容。作者能力有限，在整理时难免出现疏漏，望读者以原论文为准。

01

css3 - 纯css实现一个轮播图

以上gif，只用到了5张图片，一个html+css，没有任何js。然后实现了自动轮播效果。

03

Mac屏幕录制软件：Camtasia 2022

Camtasia 2022是应用在Mac上最好的屏幕录制软件，使用Camtasia 2022Mac可以轻松记录屏幕上的活动，Keynote幻灯片，摄像机视频，麦克风或系统音频 - 所有的清晰度都令人耳目一新，Camtasia 2022 for Mac此次更新添加了具有可配置模糊量和色调颜色的模糊区域视觉效果。在您心中想要的任何阴影下享受磨砂玻璃。

03

使用手机和 LRTimelapse 拍摄合成延时视频教程（上）

延时摄影，又称缩时摄影，是将几小时甚至几天内的影像压缩至几十秒内的拍摄方法。由于延时视频能够快速的展现大规模的场景变化（如日转夜），往往能够给人带来惊叹的视觉体验。虽然延时视频拍摄一度曾是单反相机的专长，但随着技术的进步，即便你只有一部手机，同样能够创作出美轮美奂的延时摄影作品。

01

一文详解ORB-SLAM3中的地图管理

想要理解ORB-SLAM3的地图管理，仅看ORB-SLAM3的论文[3]是不够的，因为很多细节出现在之前的ORB-SLAM1/2[1][2]，以及ORB-Atlas[4]这几篇论文中。从头到尾搞清楚这些论文中采用的地图管理方法，就能理解ORB-SLAM3中的内容。本文介绍这几篇论文中涉及地图的部分，并不介绍特征跟踪、关键帧创建等内容。作者能力有限，在整理时难免出现疏漏，望读者以原论文为准。

03

Animcraft 2.1 新版本发布！

自Animcraft 2.0发布以来，我们进一步开发了更多的实用功能和效率工具，并且对软件进行了一次大型的重构，使其更稳定、高效、利于扩展。我们计划在本次2.1版本与随后的2.2版本（12月）分两次推出今年开发的全部功能。

02

面向前端的 Lottie & AE 动画手把手入门教学

因为我一直比较关注 Web 领域的设计趋势, 很早之前就听很说了 Lottie 这个项目, 但是一直没时间和机会去尝试, 最近终于有时间机会于是尝试了一把, 在这里分享一下。

05

一篇文章教会你使用html+css3制作GIF图

生活中经常会见到很多gif图，那么gif图到底是什么？GIF是一种位图。简单来说就是通过每一张张静图，通过控制它的关键帧，从而达到静态图动起来的效果。

01

《从案例中学习JavaScript》之酷炫音乐播放器（二）

上一节传送门：http://www.jianshu.com/p/14dd440a8bc3 本节实现了：歌曲切换图标转动显示歌曲信息 Paste_Image.png 下一节计划：添加音轨进度条

[UWP]使用离散式关键帧播放动画

以DoubleAnimationUsingKeyFrames为例，它支持四种Double的关键帧，其中EasingDoubleKeyFrame、LinearDoubleKeyFrame和SplineDoubleKeyFrame可以归类为连续式关键帧，而DiscreteDoubleKeyFrame则是离散式关键帧。

02

自动驾驶系统中摄像头相对地面的在线标定

文章：Online Camera-to-ground Calibration for Autonomous Driving

05

styled-components 深入浅出 (二) : 高阶组件

上篇文章介绍了 styled-components 的一些基础用法，这篇文章接着介绍写它的一些高阶组件用法。

03

ivx动效按钮基础按钮制作 02

在上一节中制作了一个可以增加动效的自定义按钮后，这一节通过这个行按钮对其进行特效制作。

02

回顾css的animation属性

异名新接一个需求，实现一个文字的切换，结果发现太久没写css动画，对animation属性已经很陌生，尤其是对steps()函数的理解已经丢掉了。

01

深入了解 CSS 渐变动画：高级技巧和案例

CSS 渐变动画是一种强大的方式，可以为网页元素添加平滑的颜色过渡效果。虽然基本的渐变动画非常简单，但在本文中，我们将深入探讨一些高级技巧和案例，以帮助你创建更复杂和令人印象深刻的渐变动画。

03

CSS3动画详解

CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

02

Unity动画系统需要了解的东西，包括：编辑器、事件、资源管理等

导入类动画是通过Unity提供的动画导入器将3D模型导入到Unity项目中的过程。导入过程包括以下步骤：

05

CSS进阶-CSS动画关键帧

CSS动画关键帧（@keyframes）是CSS动画的核心，它允许开发者定义一个动画序列中的多个样式阶段，从而实现细腻、可控的动画效果。掌握关键帧动画不仅能够提升网页的交互性和美观度，还是现代Web开发不可或缺的技能之一。本文将深入浅出地介绍CSS动画关键帧的使用方法，探讨在实际应用中常见的问题、易错点以及如何避免这些问题，并提供实用的代码示例。

01

css3动画

此为动画样式中的关键帧，用关键帧来控制css动画中的关键样式。相比较过渡更加的容易空值中间的部分

04

机器人SLAM算法漫谈

1. 前言　　开始做SLAM（Simultaneous Localization and Mapping，机器人同时定位与建图）研究已经近一年了。从一年级开始对这个方向产生兴趣，到现在为止，也算是对这个领域有了大致的了解。然而越了解，越觉得这个方向难度很大。总体来讲有以下几个原因：入门资料很少。虽然国内也有不少人在做，但这方面现在没有太好的入门教程。《SLAM for dummies》可以算是一篇。中文资料几乎没有。 SLAM研究已进行了三十多年，从上世纪的九十年代开始。其中又有若干历史分枝和争论，要把

Silverlight初级教程-动画

Silverlight初级教程动画在这一节里将要用到在“认识工作区”中提到的时间抽了。这里将和学习flash的过程一样做一个最简单的动画。 silverlight中的动画是以“storyboard”的形式表现出来。“storyboard”你可以认为是flash中的时间轴。 flash中只有一个时间轴，而在silverlight中却可以有多个“storyboard”。在flash中是有一个帧频的概念的，例每秒12帧、每秒30帧等。而在silverlight中则是完全的基于时间的，例

CSS3 动画属性

CSS3 动画虽然transition在一定的时间内可以实现元素的初始状态在指定的时间范围过渡最终状态，模拟一种过渡动画效果，但它的功能是非常有限的。因此，CSS3 新增了一个动画属性animation。与过渡属性transition属性不同的是，CSS3 的animation属性可以像Flash制作动画一样，通过关键帧控制动画的每一步，实现更为复杂的动画效果。 CSS3中通过animation实现动画和transition实现动画非常类似，都是通过改变元素的属性值来实现动画效果的。它们的区别主要在于：使用 transition属性只能通过指定属性的初始状态和结束状态，然后在两个状态之间进行平滑过渡的方式来实现动画。而animation实现动画效果主要由两个部分组成： 1). 通过类似Flash动画中的关键帧来声明一个动画； 2). 在animation属性中调用关键帧声明的动画，从而实现一个更为复杂的动画效果。 CSS3动画属性animation和CSS3的transition属性一样是一个复合属性，它包含了8个属性： animation-name，主要用来指定一个关键帧动画的名字，这个动画名必须对应一个@keyframes规则。CSS加载时会应用animation-name指定的动画，从而执行动画。 animation-duration，主要用来设置动画播放所需时间，一般以秒为单位。 animation-timing- function主要用来设置动画的播放方式，与transition-timing-function类似。 http:/ /www.iis7.com/b/wzjk/ animation-delay、主要用来指定动画开始时间，一般以秒为单位。 animation-iteration- count、主要用来指定动画播放的循环次数。 animation-direction、主要用来指定动画的播放方向。 animation-play- state，主要用来控制动画的播放状态。 animation-fill- mode，主要用来设置动画的时间外属性。br/>：关键帧在CSS3中，把@keyframes称为关键帧 @keyframes 的作用： transition制作一个简单的动画效果时，包括了元素的初始属性和最终属性，一个开始执行动作时间和一个延迟动作时间以及一个动作变换速率，其实这些值都是一个中间值，如果要控制得更细一些，比如说要第一个时间段执行什么动作，第二个时间段执行什么动作（换到Flash制作动画中来说，就是第一帧要执行什么动作，第二帧执行什么动作），这样用transition 就很难实现了，此时也需要一个“ 关键帧”来控制。在CSS3中就是通过@keyframes属性来实现这样的效果的。br/>@keyframes的语法： @keyframes具有其自己的语法规则，命名是由@keyframes开头，后面紧跟着是“动画的名称”加上一对花括号“{...}”，括号中就不同时间段样式规则，有点像CSS的样式写法。一个@keyframes中的样式规则是由多个百分比构成的，如0%～100%，可以在这个规则中创建更多个百分比，分别给每个百分比中需要有动画效果的元素加上不同的属性，从而让元素达到一种不断变化的效果，比如说移动，再比如改变元素颜色、位置、大小和形状等。不过有一点需要注意，可以使用“ frome”“to”代表一个动画是从哪开始，到哪结束，也就是说from就相当于0%，而to相当于100%。值得说的是，0%不能像别的属性取值一样把百分比符号省略，在这里必须加上百分符号（%）。如果没有加上，这个@keyframes是无效的，不起任何作用。因为@keyframes的单位只接受百分比值。@keyframes可以指定任何顺序排列来决定animation动画变化的关键位置 CSS中为元素应用动画：要在CSS中为元素应用动画，首先要创建一个已命名的动画，然后将它附加到该元素属性声明块中的一个元素上。动画本身并不执行任何操作；为了向元素应用动画，需要将动画与元素关联起来。这个要创建的动画，必须使用@keyframes来声明（或者对于当前的Webkit实现，使用@-webkit-keyframes），后跟所选择的名称，该名称主要用于对动画的声明作用，然后指定关键帧。：CSS3动画8个子属性详解

02

2019年了，你还不会CSS动画？

今年我面试了很多同学，只要看到简历上写“熟练掌握CSS3”的，我都会问问动画相关知识。然而我发现：都 2019 年了，还有很多同学不会 CSS 动画。

03

pr添加删除关键帧_pr怎么全选关键帧

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/168196.html原文链接：https://javaforall.cn

01

达芬奇DaVinci Resolve Studio 18

DaVinci Resolve是一款在同一个软件工具中，将剪辑、调色、视觉特效、动态图形和音频后期制作融于一身的解决方案！它采用美观新颖的界面设计，易学易用，能让新手用户快速上手操作，还能提供专业人士需要的强大性能。有了DaVinci Resolve，您无需学习使用多款软件工具，也不用在多款软件之间切换来完成不同的任务，从而以更快的速度制作出更优质的作品。这意味着您在制作全程都可以使用摄影机原始画质影像。只要一款软件，就相当于获得了属于您自己的后期制作工作室！学习和掌握DaVinci Resolve，就能获得好莱坞专业人士所使用的同款制作工具！

02

前端迪士尼动画守则上

阅读此文章前，建议大家先观看一下这个迪斯尼的小视频, 本文的灵感来自于该视频的哈该视频是描述迪士尼这么多年积累的动画开发经验和规则。有人就好奇了，迪士尼的动画守则跟我们前端有啥关系吖？当

06

玩转AE丨动效设计必备指南

导语动效是用户体验的重要组成部分，也是产品调性的重要体现。如今动效设计也有了更多的解决方案，如Framer、Principle、Flinto、Protopie等，这些软件在制作交互原型时，确实有更轻量便捷的优势，但效果也有一定的局限性，或者要求使用者有代码基础，比较适合有针对性的人群。而After Effects作为动效软件的鼻祖，以其强大的兼容性、效果丰富性和清晰明了的图层操作逻辑深得设计师们喜爱，不论是UI、运营还是多媒体类型的设计都能满足，无疑是目前最具有普适性的动效软件。本文从AE的

04

视频剪辑片头设计理念是什么？有 2023年会声会影片头设计与制作

随着视频编辑技术的普及，创作天平便开始往大众方向倾斜，视频创作领域的生态也随之改变。一段优秀的片头，竟可以直接把视频作品送上热门，促成年轻IP的兴起。那么有关片头设计理念，片头设计与制作的相关问题，本文将进行详细介绍。

01

视频无缝续播的一些解决方案

公号已经很久没有更新了，突然想起之前一段时间更新频繁的时候，有粉丝在后台问我这么闲是不是自由工作者的问题。事实上我并不是自由工作者，我也是众多打工大军中平平凡凡的一员，只是之前在找工作，除了出去面试就是整理一下以前学习过一些技术要点，顺带发表共享一下而已。而最近因为到了新公司，忙于新公司的业务工作，所以断更了一段时间。

01

HTML CSS 中的简单响应式文本滑块

02

中国第五届CSS大会分享：CSS TIME

懵懂少年有幸受邀参加3.30中国第五届CSS大会分享，感谢业界大咖的不嫌弃，鉴于CSS的更新频率不及JS各种迭代高，新的特性组织起来对于分享的主题会比较散，所以我选择了一个关于动画时间的分享主题，基于大家熟悉的属性提炼出新的用法与思维，用于引导WEB侧动画的制作。

02

Web 动画原则及技巧浅析

在 Web 动画方面，有一套非常经典的原则 -- Twelve basic principles of animation，也就是关于动画的 12 个基本原则（也称之为迪士尼动画原则），网上对它的解读延伸的文章也非常之多：

03

总结CSS3新特性(Animation篇)

总结CSS3新特性(Animation篇) 动画(Animation),是CSS3的亮点.//之一通过animation属性指定@keyframe来完成关键帧动画; @keyframe用法:　　 @keyframes name { 0% { top: 0; }/*0%可用from关键字替代*/ 50% { top: 10px; } 100% { top: 0; }/*100%可用to关键字替代*/ } 由于是CSS3,所以不出意外

06

前端迪士尼动画守则上

看到这些原则的时候，我就在思考，是否在前端开发动画中，能够运用到这些原则呢？故自己根据这些原则动手试了下相应的动画效果。

02

ORB-SLAM3 单目地图初始化（终结篇）

请阅读本文之前最好把ORB-SLAM3的单目初始化过程再过一遍（ORB-SLAM3 细读单目初始化过程(上)、超详细解读ORB-SLAM3单目初始化（下篇）），以提高学习效率。单目初始化过程中最重要的是两个函数实现，分别是构建帧（Frame）和初始化（Track）。接下来，就是完成初始化过程的最后一步：地图的初始化，是由CreateInitialMapMonocular函数完成的，本文基于该函数的流程出发，目的是为了结合代码流程，把单目初始化的上下两篇的知识点和ORB-SLAM3整个系统的知识点串联起来，系统化零碎的知识，告诉你平时学到的各个小知识应用在SLAM系统中的什么位置，达到快速高效学习的效果。

03

《FFmpeg从入门到精通》读书笔记（三）

FFmpeg本身不支持H.264的编码器，是由FFmpeg的第三方模块对其进行支持，当前常用的编码器为x264，所支持的像素格式主要包括以下几种（使用ffmpeg -h encoder=libx264进行查询）

02

轮播图效果，不再局限于JS制作！

HTML5学堂（码匠）：网页的轮播图一直都是个比较精美的制作，同时也是用户体验较佳的效果。在开发工程师进行制作的时候往往会选择使用JS来书写，由此不禁会问，难道真的只有使用JS才能制作轮播图吗？本文主要内容 1. 效果展示 2. 主要涉及到的知识点 3. 基本实现思路 4. 案例实现 1. 效果展示 CSS3动画效果的强大不言而喻，自它出现一直是热度不减，毋庸置疑的是CSS3动画的出现在一定程度上降低了动画效果的实现难度。其精练的代码把我们从复杂的JS制作中解放出来，如下的轮播图效果即是纯CSS3制作的。

06

使用css实现边框流动效果

要实现一个边框流动的效果，可以使用CSS动画来实现。在HTML中，我们需要创建一个元素（例如div），并将其设置为具有一定宽度和高度的盒子。然后，我们可以使用CSS来定义该元素的边框样式、位置和动画。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭