0

I have a button which currently rotates in 360 degrees for half a second. It's css:

.progress-spinner{
    color: #FF4081;
    -webkit-animation:spin 0.5s linear 1;
    -moz-animation:spin 0.5s linear 1;
    animation: spin 0.5s linear 1;

}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

I also want this button to zoom in and out at the same time. How can I achieve it? I have another animation for zoom in and out as following:

animation-name: pop;
animation-iteration-count: 1;
animation-duration: 0.3s;
animation-direction: normal;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;

@keyframes pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(2);
    }

    100% {
        transform: scale(1);
    }
}

I am not sure how to put them together?

Thinker
  • 5,326
  • 13
  • 61
  • 137
  • @TylerH the one you pointed out tries to tackle animation with different time intervals, mine is different. I want to apply both the animation at the same time – Thinker Jul 12 '17 at 21:11
  • Look at the second answer (the one with the highest score). – TylerH Jul 12 '17 at 21:13
  • I actually tried the same, but it did not have any effect. I also updated my question with my attempt to achieve it – Thinker Jul 12 '17 at 21:16
  • 1
    https://jsfiddle.net/TylerH/3qg96ot0/ Seems to work fine to me. If you want to use each individual property separately, use comma separated values for each property. If you want to use the shorthand, use a comma to separate two different sets of each property keyword. It's just a little extrapolation to understand what's needed. – TylerH Jul 12 '17 at 21:25
  • Thanks! It worked – Thinker Jul 12 '17 at 21:39

0 Answers0