I am trying to make the same object have 2 animations. The first animation, let it go from 10 to 100 (for example) and let this repeat 2 times. When that animation is over, start the other one that at 100% of the width changes color by infinity.
What I have is this, but it doesn't come out the way I want:
#AnimacionTitulo {
width: 200px;
background-color: #CCBDFB;
color: FloralWhite;
font-weight: bold;
animation: AnimacionTitulo 1.5s 2.5, cambioRGB 10s infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
@keyframes AnimacionTitulo {
50% { width: 100%; }
}
@keyframes cambioRGB {
60% {background-color: #31e4a6;}
70% {background-color: #6de431;}
80% {background-color: #e4a331;}
90% {background-color: #772bec;}
100% {background-color: DarkSlateBlue;}
}
<html>
<head></head>
<body>
<div id="AnimacionTitulo">
<h1>Buenas tardes</h1>
</div>
</body>
</html>
I feel that I am very very close, but I cannot find what I am missing. The animation itself is done fine, but I want the color change to be done when the first animation ends.
I also don't understand why the color change goes at different speeds...
The first thing I would do would be to make one animation independent of another, in order to be able to give properties to each animation independently.
The problem with this is that the same element cannot receive two animations, so the unfold and fold animation was given to the
<div>
container and the color change to the<h1>
.Then, by
animation-delay
calculating how long it takes to run the first animation and then launch the second.With the CSS shortHand
With the shorthand notation of
animation
you could pass thedelay
as a parameter.