How to make a smooth increase in CSS3?

Friends like that would make the animation came back as smoothly as back and forth?

Here's a simple example lifted on codepin https://codepen.io/Cheizer/pen/KQpMKQ

Use the animation scale, but suddenly jerks forward picture, ago smoothly well. As increased make is 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)
}
}
June 8th 19 at 17:18
2 answers
June 8th 19 at 17:20
Solution
@keyframes scale {
 0 {
 transform: scale(.9)
}
 30% {
 transform: scale(1)
}
 100% {
 transform: scale(.9)
}
}

In this code, just had to put a percent sign near zero.
Sure! My bad :) Thank you. - jordan_Schmi commented on June 8th 19 at 17:23
June 8th 19 at 17:22
So 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;
}
}

Find more questions by tags CSSHTML