I understand that this question has been asked multiple times before, but I am seeking a fresh approach to these animations.
Issue:
The second box contains multiple animations, and I am trying to achieve the same effect as the first one. However, it seems like the transform property is being overwritten (as expected). Despite trying to extend the first animation of the second box with the properties of the second animation, using animation-fill-mode: forwards did not yield success. Perhaps I am overlooking something basic. Is achieving this possible with pure 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:
Create separate move2-right and move2-down keyframe rules while operating on the same element, maintaining the transformations from the first animation. If there's an alternative method for achieving this type of animation, I would appreciate guidance on 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>Feel free to experiment with the provided fiddle: JSfiddle