如何分别为每个div设置动画
为每个div设置动画可以通过CSS的animation属性来实现。下面是一个示例：
首先，在HTML中创建多个div元素，每个div都有一个唯一的id，如下所示：
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>然后，在CSS中为每个div设置动画效果，可以使用@keyframes规则定义动画的关键帧，然后将动画应用到每个div上，如下所示：
@keyframes slideIn {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
#div1 {
animation: slideIn 1s ease-in-out;
}
#div2 {
animation: slideIn 1s ease-in-out 0.5s;
}
#div3 {
animation: slideIn 1s ease-in-out 1s;
}在上面的示例中，我们定义了一个名为slideIn的动画，从左侧滑入div。然后，我们将这个动画应用到每个div上，通过设置animation属性的值为动画名称、持续时间、动画速度和延迟时间。
这样，每个div都会按照定义的动画效果进行动画展示。
关于动画的更多细节和属性，可以参考腾讯云的CSS动画相关文档：CSS动画
相关·内容
2回答
Reactjs -将一个div转移到另一个div上，在另一个上使用幻灯片式幻灯片动画。
css、reactjs
我有一页有两个div的。每个div占据整个屏幕，因此开头的一个div位于顶部和可见，而另一个则不可见。当我单击第一个div上的按钮时，我希望第二个div在第一个div的顶部滑入并变得可见。然后我希望第二个div滑出并再次显示第一个div。
我的问题是我不知道如何将javascript和css连接起来。当我点击按钮并触发一个事件时，我不知道如何启动动画。
反应
const styles = {
p1: "page1",
p2: "page2",
slideIn: "slideIn",
}
class App exte
浏览 1提问于2019-03-28得票数 3
1回答
CSS动画并非在所有浏览器中都有效
html、css、animation
除了火狐之外，我很难让任何浏览器来动画下面的JSFiddle ..
我想我已经添加了浏览器的所有选项，但有些地方不正确:((
FIREFOX 27:工作
CHROME 33:无法工作
IE 11:不工作
SAFARI (IPHONE)：不工作
JSFIDDLE：
MYCODE：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css&
浏览 0提问于2014-02-24得票数 2
1回答
为什么这个CSS3动画不能运行？
css、animation
这是我第一次自己编写CSS3动画，我刚打开页面，它没有运行。
唯一的效果是应用动画fallB的对象消失了，但位置不变。
动画应用到的其他元素不会发生任何变化。
我做错了什么？
下面是我的代码：
.animated{
-moz-transform: translate(0,0);
-webkit-transform: translate(0,0);
transform: translate(0,0);
-moz-transform3d: translate(0,0,0);
-webkit-transform: tra
浏览 1提问于2013-04-11得票数 0
回答已采纳
1回答
CSS3动画幻灯片
html、css、css-animations
我正在创建一个具有以下基本结构的html文件：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="main">
<h1>Title</h1>
<div id="div1"></div>
<div id="div2"></div&
浏览 4提问于2016-12-31得票数 0
回答已采纳
2回答
仅使用css转换转换来控制动画，而不是边距和其他非优化
html、css、animation
我正在尝试使用transform translate属性重新创建此动画。动画使用边距来控制动画，这是不优化的。
他是代码的原始来源：
<style>
body {
background: #00b4ff;
color: #333;
font: 100% Lato, Arial, Sans Serif;
height: 100vh;
margin: 0;
padding: 0;
overflow-x: hidden;
}
#background-wrap {
bottom: 0;
left: 0;
po
浏览 8提问于2018-05-04得票数 0
3回答
应用类之前更改的CSS类不会生效。
jquery、html、css、animation
在这里呆了一段时间，想知道是否有人能给出一个指针：
本质上，在将css动画类应用到要动画的元素之前，我尝试更新css动画类，但是类中更新的元素不适用。在这个例子中，当我尝试动画时，迭代计数、持续时间和延迟并不适用，但是如果我已经在类中使用了它们，它们就可以正常工作(它们现在被注释掉了)。
在应用动画之前，有什么想法或其他方法来更新动画吗？我是否需要为动画的每一个变体分别设置类呢？“
谢谢。
$(document).ready(function(){
$(".blsAnimation").css("animation-iteration-count:",
浏览 3提问于2017-05-23得票数 1
回答已采纳
3回答
我有以下标记：
<div class="container">
<div class="content">
...
<div class="no-animate">
...
</div>
</div>
</div>
因此，我想将CSS动画应用到.container，但不包括其中的.no-animate。请注意，.no-animate具有position: fixed属性，这就是我要排除它的原因。
我尝试了以下几点：
@keyfram
浏览 7提问于2021-05-11得票数 0
回答已采纳
1回答
CSS3动画链在webkit浏览器中无法工作
css、css-animations
我似乎找不到解决这个问题的办法。
我把一个精灵动画放进了一个div里。现在我想要两个不同的动作，包含div。
应该把div带进视野
应该在无限循环中从左向右移动div。
它在FF和IE中工作得很好，但是链中的第二个动画并不在webkit浏览器中播放.
有趣的是，如果在Chrome中打开检查器，并在html代码中的div上悬停，您实际上可以看到容器和sprite div在移动，但是sprite本身没有。奇怪的是.
这是代码
提前结束。
html
<body>
<section class="center">
<
浏览 2提问于2015-03-19得票数 1
回答已采纳
2回答
动画一个图像一次CSS
jquery、html、css
基本上，我想把图像从中间移到左边100像素，然后保持在那个位置。我更希望它能在网页发布后几秒钟内运行。
div img {
width: 120px;
height: 120px;
position: relative;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
#div1 {-webkit-animation-timing-f
浏览 1提问于2016-07-06得票数 0
回答已采纳
3回答
如何延迟CSS动画的开始？
css、css-animations
我正在尝试延迟CSS动画的触发(不是减慢动画本身，而是在开始之前延迟几秒钟)。并且在动画运行之前不应显示图像。我看过了其他问题，他们似乎没有解决这个问题。
我的小提琴：
CSS
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-w
浏览 1提问于2015-04-09得票数 8
3回答
不透明动画元素显示CSS -淡出然后动画
css、css-animations、opacity
我有一个淡入动画与不透明度，它的工作伟大，但事实是，元素显示时，页面正在加载，然后动画.
下面是我的CSS代码：
.header-wrap {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animatio
浏览 0提问于2019-07-22得票数 0
回答已采纳
2回答
需要帮助理解CSS3动画
css、css-animations
我试着在CSS3中学习动画，但是我把所有的文档都粘在那里了。我有这样的代码：
h1{
-webkit-animation: moveDown 1.s ease-in-out .6s backwards;
-moz-animation: moveDown 1s ease-in-out 0.6s backwards;
-o-animation: moveDown 1s ease-in-out 0.6s backwards;
-ms-animation: moveDown 1s ease-in-out 0.6s backwards;
浏览 1提问于2013-04-05得票数 0
回答已采纳
2回答
如何在固定时间间隔后滑动文本
jquery、css、animation
我想从上到下在一个滑块上动画一个文本。下面是我用来给它添加动画的css：
Html：
<p class="rg5 slideInDown" id="text-animation">mobile</p>
css：
.rg5 {
font-family: roboto sans-serif;;
font-size: 52px;
color: #ffffff;
margin-bottom: 10%;
line-height: 1;
text-transform: uppercase;
transition: 1s
浏览 0提问于2017-02-21得票数 4
1回答
在CSS加载器中修复动画循环
html、css、animation、css-animations
我在CSS中有一个加载程序动画。它以圆形的方式旋转4个div。我遇到的问题是，第4div(红色)是最初显示的，没有淡出干扰动画流(您可能需要刷新才能看到)。
修复这个问题的最佳方法是什么，以使动画的循环得到改进？
代码():
.loader {
position: relative;
height: 50px;
width: 50%;
left: 45.5%
}
.loader .bullet {
position: absolute;
padding: 5px;
background: green;
animation: animIn 1s ease-i
浏览 1提问于2016-04-11得票数 4
回答已采纳
4回答
如何在CSS中连续播放多个动画？
css、css-animations
我不能一个接一个地播放几个具有“流畅”效果的动画：
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s, pulse 0.5s ease 1s;
height: 100px;
width: 100px;
}
@keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes pulse
浏览 2提问于2018-05-29得票数 3
1回答
在移动/平板电脑上保持定位(响应式)
css、sass、flexbox、css-animations
我在3个框(Flexboxes)上有一个CSS动画，这些框使用变换从屏幕外过渡到适当的位置，但是每当我调整窗口大小时，这些框就会彼此分开，并远离预期的位置(它们应该是重叠的)。我如何让这些盒子留在原地？或者，如果这是不可能的，我如何删除转换，使它们返回到停留在一行内，但扩展整个屏幕的宽度？ index.scss html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
justify-content: center;
}
浏览 6提问于2019-03-13得票数 0
回答已采纳
1回答
是否可以使用关键帧动画分别为多个css变换属性设置动画
css、animation、transform、css-animations
我想像这样使用关键帧动画分别为两个(或更多) css变换属性设置动画：
@keyframes translatex {
100% {
transform: translateX(100px);
}
}
@keyframes rotatez {
100% {
transform: rotateZ(80deg);
}
}
HTML：
<div class="rect"></div>
translatex动画应该以0延迟开始，并持续5秒。rotatez动画应以1s延迟开始，持续3秒。因此.rect
浏览 4提问于2012-11-27得票数 16
回答已采纳
2回答
如何使用css制作带有启动动画的动画进度条
css、animation、progress
我正在尝试用启动动画实现一个动画进度条。
问题是我使用的是transform: translateX(-100%);，它会产生丑陋的效果--进度条在进度区域之外。
核心：
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
.progress {
width:200px;
height:50px;
border:1px solid black;
position:relat
浏览 0提问于2019-05-08得票数 0
回答已采纳
5回答
使用CSS动画属性在类更改时进行多个CSS转换
html、css、css-transitions、css-transforms
当仅使用CSS将.move类添加到.box时，如何激活CSS动画？动画应首先平移，平移完成后，旋转应从平移结束的位置开始。另外，如何使动画的结束状态在移除.move类时保持为100%并重置为0%？ $(".test").click(function(){
$(".box").toggleClass("move")
}); body{
padding: 45px;
}
.test{
margin-top: 15px;
}
.box{
height: 45px;
width: 45px;
background: bla
浏览 46提问于2016-07-07得票数 2
回答已采纳
1回答
角度ng-视图动画转换
angularjs、css、transition、ng-animate、ng-view
使用angularjs1.2，我想将转换动画应用到我的输入和离开视图中。我使用'ngAnimate‘使这成为可能，但是过渡动画只发生在我的主页上。我一直在使用这个作为向导。
HTML (index.html)：
<body ng-controller="mainCtrl" id="outer">
<div id="page">
<!-- partial views -->
<div class="page {{pageClass}}" ng-view>
浏览 2提问于2015-03-30得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
