Combine css animations on an image element [duplicate] - html

Question

This question already has answers here:
How to apply multiple transforms in CSS?
(9 answers)
Closed 2 years ago.
I'm just starting to learn some css (I was working before only in PHP + JS) and I wanted to make an animation of my image text. It should Slide bottom and Zoom in at the same time. I managed to do both but separately. I have no idea how to combine them...
Here is an example of what I have achieved:
https://jsfiddle.net/ta7208Lq/20/
// HTML
<div class="row">
<img class="zoom" src="https://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153" />
<img class="slide-bottom" src="https://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153" />
</div>
// CSS
.slide-bottom {
-webkit-animation: slide-bottom 1s;
animation: slide-bottom 1s;
}
.zoom {
-webkit-animation: zoom-in 1s;
animation: zoom-in 1s;
}
/* ----------------------------------------------
* Generated by Animista on 2020-11-7 16:22:35
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: #cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-bottom
* ----------------------------------------
*/
#-webkit-keyframes slide-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(150px);
transform: translateY(150px);
}
}
#keyframes slide-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(150px);
transform: translateY(150px);
}
}
/**
* ----------------------------------------
* animation zoom-in
* ----------------------------------------
*/
#-webkit-keyframes zoom-in {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
#keyframes zoom-in {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
.row {
float: left;
}
img {
display: inline-block;
}
The idea is of course to put it on one image, I have just added two to illustrate the problem.

Answer 1

If you want to perform multiple animation at the same time, you can add additional transitions as transform: translateY(0) scale(0.2) .., And then update in keyframes as well. Here is the updated code