How to make smooth zoom in CSS3?

Question

css

Friends, how to make the animation return as smoothly back as it does forward?
Here is a simple example raised on codepin https://codepen.io/Cheizer/pen/KQpMKQ
I use the animation scale property, but the picture twitches forward sharply, the back smoothly is good. How to make the increase also smooth?

#loader {
    animation-name: scale;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezer(1, .01, 0, 1.01);
    transform-origin: 50% 50%
}
@keyframes scale {
    0 {
        transform: scale(.9)
    }
    30% {
        transform: scale(1)
    }
    100% {
        transform: scale(.9)
    }
}

Answer 1

@keyframes scale {
    0 {
        transform: scale(.9)
    }
    30% {
        transform: scale(1)
    }
    100% {
        transform: scale(.9)
    }
}

In this code, it was simply necessary to put a "percentage" sign near zero.

Answer 2

Here is how I found an example, maybe someone will like it

@keyframes scale {
  from {
    -webkit-transform: scale(1.0);
    -ms-transform: scale(1.0);
        transform: scale(1.0);
    opacity: 0.75;
  }
  50% {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
        transform: scale(1.2);
    opacity: 1.0;
  }
  to { 
   -webkit-transform: scale(1.0);
    -ms-transform: scale(1.0);
        transform: scale(1.0);
    opacity: 0.75;
  }
}