I know this is asked multiple times here, but I am asking for a different approach for these kind of animations.
Problem:
The 2nd box has multiple animations, trying to create the same effect as 1st one. It seems like the transform property is getting overwritten (as it should)*. I am trying to extend the 1st animation (of 2nd box) with the properties of 2nd animation. Tried to use animation-fill-mode: forwards
but with no success. Maybe I am missing something basic. Is it possible with vanilla CSS?
The ‘animation-name’ property defines a list of animations that apply. If multiple animations are attempting to modify the same property, then the animation closest to the end of the list of names wins.
Requirement:
Separate move2-right
and move2-down
key-frames rules but work on the same element, preserving the 1st animation transformation. If there is an alternate approach to this kind of animation, please guide me through it.
Current output:
.animation-1,
.animation-2 {
width: 200px;
height: 200px;
display: inline-block;
background: white;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.movable-1,
.movable-2 {
background: #41A186;
width: 50px;
height: 50px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
text-align: center;
vertical-align: middle;
line-height: 50px;
}
.movable-1 {
-webkit-animation-name: move1;
animation-name: move1;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.movable-2 {
-webkit-animation-name: move2-right, move2-down;
animation-name: move2-right, move2-down;
-webkit-animation-duration: 2s, 2s;
animation-duration: 2s, 2s;
-webkit-animation-delay: 4s, 6s;
animation-delay: 4s, 6s;
-webkit-animation-fill-mode: forwards, forwards;
animation-fill-mode: forwards, forwards;
}
@-webkit-keyframes move1 {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
50% {
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
100% {
-webkit-transform: translateX(30px) translateY(50px);
transform: translateX(30px) translateY(50px);
}
}
@keyframes move1 {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
50% {
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
100% {
-webkit-transform: translateX(30px) translateY(50px);
transform: translateX(30px) translateY(50px);
}
}
@-webkit-keyframes move2-right {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
50% {
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
100% {
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
}
@keyframes move2-right {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
50% {
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
100% {
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
}
@-webkit-keyframes move2-down {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
50% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
100% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
}
@keyframes move2-down {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
50% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
100% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
}
<div class="animation-1">
<div class="movable-1">1</div>
</div>
<div class="animation-2">
<div class="movable-2">2</div>
</div>
See Question&Answers more detail:os