How to make a smooth increase in CSS3?

Question

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)
}
}

jordan_Schmi asked June 8th 19 at 17:18

Related questions

More answers about "How to make a smooth increase in CSS3?"

2 answers

jordan_Schmi answered on 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;
}
}

jacynthe_Walk answered on · Accepted Answer · 2019-06-08T17:20:59.623Z

jacynthe_Walk answered on 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