How do I make this rectangle object fade out and then do another animation?
Am I trying to make this rectangle fade out and then play a second animation ? However, it does not disappear at the moment and after a few seconds it just plays a second animation.
HTML CODE:
<div class="rectangle firstAnimation thirdAnimation"></div>
CSS CODE:
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
.rectangle {
position:fixed;
width: 300px;
height: 36px;
opacity:0.8;
margin-top:215px;
background: #212e84;
z-index:1;
}
.firstAnimation {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-moz-animation-delay: 1s;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
@-webkit-keyframes movingbox {
0% {
left:0px;
}
100% {
left:-157px;
}
}
.thirdAnimation {
animation-name: movingbox;
-webkit-animation-name: movingbox;
-moz-animation-name: movingbox;
-webkit-animation-delay: 4s;
animation-delay: 4s;
-moz-animation-delay: 4s;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-moz-animation-duration: 3s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
source to share
You cannot set two different animations under two different CSS selectors, as the last (or more specific) declaration will overwrite the previous one.
The way to apply more animation to one element would be to set the comma separated values to a setting animation
as shown below:
.thirdAnimation {
animation-name: movingbox, fadeIn; /* specify multiple animations in CSV format */
animation-delay: 4s, 0s; /* first value is delay for 1st animation, next is for 2nd */
animation-duration: 3s; /* when only one value is provided, the same applies for both animations */
animation-fill-mode: forwards;
}
Setting it animation-delay
as 0s
for the fadeIn animation will cause it to start immediately, but it animation-duration
will 3s
, it will be completed before the animation of the moving window starts (after a 4s delay). You can play with animation-delay
and animation-duration
as needed.
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes movingbox {
0% {
left: 0px;
}
100% {
left: -157px;
}
}
.rectangle {
position: fixed;
width: 300px;
height: 36px;
opacity: 0.8;
margin-top: 15px; /* reduced to make it visible in snippet window */
background: #212e84;
z-index: 1;
}
.thirdAnimation {
animation-name: movingbox, fadeIn;
animation-delay: 4s, 0s;
animation-duration: 3s;
animation-fill-mode: forwards;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="rectangle thirdAnimation"></div>
Note. ... In the snippet, I used a prefix library to avoid the browser prefix.
source to share
Simillar like here: CSS Multiple animations on one element, no javascript
Solution: http://jsfiddle.net/kybernaut/vuzzmoxj/1/
change the class to only one, for example "Animation", not css:
.Animation {
animation-name: fadeIn,movingbox;
-webkit-animation-name: fadeIn,movingbox;
-moz-animation-name: fadeInmovingbox;
-webkit-animation-delay: 3s,4s;
animation-delay: 3s,4s;
-moz-animation-delay: 3s,4s;
-webkit-animation-duration: 3s,3s;
animation-duration: 3s,3s;
-moz-animation-duration: 3s,3s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
source to share