Geek Answers Handbook

CSS3 animation. Introduce the time scaling function

I am trying to make the animation scalable up and down using the animation function.

@keyframes iconEnter 0% transform scale(0) 100% transform scale(1) animation-timing-function cubic-bezier(.1,.85,.1,1) .icon animation iconEnter 5s

It simply scales linearly without using the synchronization function. What am I doing wrong?

Thanks.

+7
css css3 animation
source share
3 answers

There are 2 places where you can set the synchronization function: globally in the same place where you set the animation, or in the keyframe rule.

But in the latter case, you always have n key frames and n - 1 time intervals. In your case, 2 key frames and 1 time interval.

The synchronization function indicated on the key frame refers to the time interval that begins in this key frame.

So, the correct way to apply the synchronization function on key frames would be on the first:

 @keyframes iconEnter { 0% { transform: scale(0.1); animation-timing-function: cubic-bezier(.25,8,.25,-8); } 100% { transform: scale(1); } } div { width: 100px; height: 100px; margin: 100px; background-color: tomato; transform: scale(0.1); } body:hover div { animation: iconEnter 4s forwards; } 
 <div></div>
+6
source share

Not sure what you are expecting with a time function; It works for me on Chrome 59.

It is said ...

I can get the desired result using keyframes , TranslateX and scale

The code can be greatly reduced, but I left everything for demo purposes .

(rough) Working example:

 @keyframes iconEnter { 0% { transform: scale(0) } 10% { transform: scale(0.1) translatey(30px) } 20% { transform: scale(0.2) translatey(-30px) } 30% { transform: scale(0.3) translatey(30px) } 40% { transform: scale(0.4) translatey(-30px) } 50% { transform: scale(0.5) translatey(30px) } 60% { transform: scale(0.6) translatey(-30px) } 70% { transform: scale(0.7) translatey(30px) } 80% { transform: scale(0.8) translatey(-30px) } 90% { transform: scale(0.9)translatey(30px) } 100% { transform: scale(1) translatey(0deg) } } .icon { animation: iconEnter 10s; border-radius: 100vw; animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1) } 
 <img src="https://unsplash.it/100/100" class="icon">
+1
source share

first you need to set the synchronization function to the icon, and not to key frames, but I'm not sure if this is what you want? if you want the icon to scale, then down, and then again you need to add steps between 0% and 100%

 @keyframes iconEnter{ 0%{ transform: scale(0); } 100%{ transform: scale(1); } } .icon{ position:absolute; width: 30px; height: 30px; background: blue; animation: iconEnter 5s; animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); } 
 <div class="icon"> </div>
+1
source share

More articles:


All Articles