我正在尝试制作一个动画,div
其中前 2 秒出现并位于页面中心,一旦该动画完成,它会执行第二个动画,该动画包括div
无限旋转 360 度。
我遇到的问题是我找不到或不知道如何在同一个元素中定义两种类型的动画(或者当第一个元素完成时激活一个动画)。
.bloqueAlargado {
width: 100px;
height: 400px;
background-color: blue;
font-weight: bold;
position: relative;
-webkit-animation-name: mymove2 2s; /*Animacion 1*/
animation-name: mymove2 ;
animation-duration: 2s;
left : 36em;
animation-name: rotacion; /*Animacion 2*/
animation-duration: 4s;
animation-iteration-count: infinite;
}
@-webkit-keyframes mymove2 {
from {left: 0em;}
to {left: 36em;}
}
/* Standard syntax */
@keyframes mymove2 {
from {left: 0em;}
to {left: 36em;}
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes rotacion {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
@keyframes rotacion {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>TRANSICIONES</title>
</head>
<body>
<h1 class ="AnimacionBasica">Animacion Basica</h1>
<div class="bloqueAlargado"></div>
</body>
</html>
如果您希望两个动画同时运行,则必须声明它们以逗号分隔。
例子:
然后如果你想按顺序加载它们,那就更复杂了。您必须协调关键帧以使它们占据正确的时间:您将总时间的一半分配给其中一个动画,另一半使用百分比分配给另一个动画。
例子:
版:
至于那个,当另一端需要javascript时激活一个。如果您不想使用它,请查看上面使用协调关键帧的解决方案。