Play multiple CSS animations at the same time
You can specify multiple animations--each with their own properties--with a comma.
Example:
animation: rotate 1s, spin 3s;
TL;DR
With a comma, you can specify multiple animations each with their own properties as stated in the CriticalError answer below.
Example:
animation: rotate 1s, spin 3s;
Original answer
There are two issues here:
#1
-webkit-animation:spin 2s linear infinite;
-webkit-animation:scale 4s linear infinite;
The second line replaces the first one. So, has no effect.
#2
Both keyframes applies on the same property transform
As an alternative you could to wrap the image in a <div>
and animate each one separately and at different speeds.
http://jsfiddle.net/rnrlabs/x9cu53hp/
.scaler {
position: absolute;
top: 100%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
animation: scale 4s infinite linear;
}
.spinner {
position: relative;
top: 150px;
animation: spin 2s infinite linear;
}
@keyframes spin {
100% {
transform: rotate(180deg);
}
}
@keyframes scale {
100% {
transform: scaleX(2) scaleY(2);
}
}
<div class="spinner">
<img class="scaler" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
<div>