根据父元素类使用不同的@keyframe
是指在CSS动画中，根据父元素的类名来使用不同的@keyframes规则。
@keyframes规则用于定义动画的关键帧，即动画在不同时间点的样式。通过在父元素上添加不同的类名，可以实现在不同情况下应用不同的动画效果。
下面是一个示例：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 200px;
background-color: red;
animation: rotate 2s infinite;
}
.container.special {
animation: scale 2s infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes scale {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="container"></div>
<div class="container special"></div>
</body>
</html>在上面的示例中，我们定义了两个@keyframes规则：rotate和scale。通过在父元素的类名中添加不同的类名，可以选择应用不同的动画效果。例如，第一个容器元素没有添加任何额外的类名，所以应用了rotate动画；而第二个容器元素添加了special类名，所以应用了scale动画。
这种方式可以根据具体的需求，为不同的父元素类提供不同的动画效果，增强页面的交互性和视觉效果。
腾讯云相关产品和产品介绍链接地址：
相关·内容
1回答
97%{ } background-color: white; }@keyframes pulseColorGreen { background-color: darkgreenbackground-color: darkgreen; 100% {
background-
浏览 19提问于2018-07-29得票数 4
回答已采纳
有人能告诉我是否可以根据元素的内容而不是ID或类找到元素吗？
我试图找到没有不同类或ID的元素。(然后我需要找到该元素的父元素。)
浏览 17提问于2011-09-06得票数 384
回答已采纳
2回答
我正在尝试为移动应用程序创建一个类似于Pinterest的辐射菜单的动画菜单。除了一个小细节之外，我已经设法让行为达到了我想要的地方:当菜单打开时，菜单项按照我想要的那样弹出，当你悬停在它们上面时，它们会按照我想要的那样变换。问题是，在光标离开项目后，它们会重新触发其原始动画，而不是仅仅返回到以前的状态。我意识到这是一个与用于动画的类有关的问题，我尝试了许多解决方案，包括删除该类并添加一个新的.onmouseover
浏览 14提问于2017-06-28得票数 2
回答已采纳
1回答
我是在一个反应网站，使用sass管理风格。因此，在网站上，我通过sass实现了英语语言的排版。排版中有不同的标题和体，如heading1、heading2、body1、body2等。，我们只是改变父类基于变化道具，所以它的样式。现在的问题是，我必须为不同的语言实现排版，比如大约50种语言，我不知道哪种通用方法最适合实现。注:
我们没有使用泛型类而不是混合类来进
浏览 1提问于2020-07-26得票数 0
时间线有很少的动态关键帧元素被放置在随机位置上的绝对位置。有没有办法获得相对于可拖拽的前一个和下一个元素？例如“如果#dragger在左边:55px，下一个元素是左边的.keyframe 102px : 102px，前一个元素是左边的.keyframe 32px :32px”。我在上有一个演示，只需拖动红色条，在拖动时，我应该根据位置获得它的“兄弟”。
谢谢
浏览 0提问于2010-07-16得票数 3
回答已采纳
我正在使用vue.js和vuetify。 由父元素生成的元素存在于我的代码中。 我希望根据父类的子类动态地更改父元素的类，就像jQuery has()方法一样。
浏览 40提问于2020-09-03得票数 0
回答已采纳
1回答
所以我一直在做这个网络项目，它需要一个下面有滑块的画廊。到目前为止，我已经在forEach( JavaScript )函数中使用了这个元素来解决这个问题：因此，分页会根据所单击元素的索引进行更改。但是，由于我需要使其具有响应性，并且图形设计者需要在移动视图中使用不同的东西，因此我需要通过
浏览 4提问于2020-02-07得票数 0
回答已采纳
1回答
我可以将两个不同的CSS @keyframe动画从一个父元素委托给两个不同的子元素，在AJAX/Fetch API动态加载的内容中吗？'.one‘和'.two’中的.one受委托动画的影响。如果动态地重新加载这些元素，动画就会继续跨重加载，而不是在每次加载时从0%重新启动。
但我需要一个不同的动画'.one
浏览 0提问于2019-08-14得票数 0
我目前正在试用Timeline 2.2中的JavaFX类。声明Timeline
因此，我想我可以通过将一些SequentialTransition对象按特定顺序放入TimeLine中来创建一个每个KeyFrame都有自己的Duration。这就是我的问题所在：Duration是什么？KeyFrame应该启动的偏移量，还是KeyFram
浏览 8提问于2014-01-14得票数 3
回答已采纳
7回答
我想创建一个结构，并将其作为数组在其他结构中使用。我的问题是我不知道我想分配多大的数组，我只知道一次我在一个函数中。我的意思是我想使用[]而不是一个预先确定的常量，比如10000。我认为如果你看我的代码，它将是不言而喻的。你能告诉我如何让这段代码工作吗？此外，如果您能告诉我我正在询问的主题的名称(是动态数组吗？)，这将对我有很大帮助。我在哪里可以找到关于这个主题的文章/教程。这是我在结构中
浏览 0提问于2011-06-18得票数 1
回答已采纳
我试图使用ng-animate和一个ng-repeat (和ng-show)来淡出旧的内容，并用新的替换它。我遇到的问题是，在remove和add动画期间，添加的元素和被删除的元素都有display:block。我认为我可以通过在CSS中使用animation-delay来避免这种情况，但这只是延迟了淡出，而不是添加设置元素display的类。
结果是一个急转直下的</em
浏览 1提问于2014-02-03得票数 3
回答已采纳
2回答
storyboard1.autoreverse = true；就像我想要更改to & from字段一样
<Storyboard x:Name="Storyboard1" Completed
浏览 1提问于2012-03-01得票数 0
2回答
我想让它在点击后改变它的位置。我写了这样的代码，但不起作用。在这种情况下，控制台中不会出现错误。按钮对按压没有反应。stopPosition = 100;KeyFramekk = new KeyFrame(Duration.millis(5000),kk2);timeline.
浏览 1提问于2018-11-07得票数 0
回答已采纳
2回答
我意识到我的问题措辞很糟糕。话虽如此，我还是不知道该用什么术语来表达我的问题。我会尽我所能.例如。div>
<a class="text">Hello</a>在上面的示例中，“Hello”应该分别是蓝色和红色，但
浏览 3提问于2013-12-03得票数 0
回答已采纳
1回答
访问父DOM元素
、、、、
我的项目中有多个组件，我想将样式添加到其中之一。我认为根据子修改父元素的唯一方法是使用类.mat-dialog-container向DOM元素<mat-dialog-container>添加样式。但是，当我试图通过类.mat-dialog-container访问父元素时，我无法访问它。
浏览 5提问于2021-06-22得票数 1
回答已采纳
1回答
我想要动画的脚在搅拌机与蟒蛇。我已经制作了脚和骨架，并通过手动插入关键帧对其进行了动画处理。但是我需要动画根据一些变量的不同而不同，这就是为什么我需要使用pthon来制作动画。我该怎么做呢？？我试过使用命令"keyframe_insert“，但它没有指定从脚部到关键帧的姿势。import bpy
DOU.keyfra
浏览 34提问于2019-06-07得票数 2
我似乎在JavaFX (8u144，运行在Windows 7上)中发现了一种情况，在这种情况下，TextField使用错误的样式类呈现。这似乎只在以下情况下发生
public class RenderBug extends Application {
pri
浏览 2提问于2017-08-01得票数 1
回答已采纳
4回答
我想用泛型参数指定另一种类型的约束。class KeyFrame<T> public float Time;}
class Timeline<T> where T : Keyframe<*>}
但到目前为止，这还不能在c#中完成，(我真的怀疑它永远都不会做到)。有没有什么很好的解决方案，而不是指定关键
浏览 1提问于2008-09-29得票数 2
回答已采纳
问题:我在父类A中需要一个数组(datamember)。但是，根据子类的不同，该数组应该有不同数量的元素。
这个是可能的吗？如果是，我该怎么做？(没有动态分配)如果没有，那么有什么办法吗？
浏览 0提问于2012-01-14得票数 1
回答已采纳
我正在使用Bounce.js创建漂亮的菜单动画(具有一些很酷的效果)。使用css关键帧动画的Bounce.js，重新启动可能会有问题。我得到了菜单，当我点击一个按钮时，当添加.show类时，它应该会触发显示动画。但当我再次按下该按钮时，隐藏类应该与隐藏动画一起添加(这只是前一个动画的反向版本)。Js正在工作(类的添加和删除都是正确的)，但是动画只触发一次-并且没有隐藏动画(菜单元素
浏览 8提问于2016-06-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
