CSS3 Animation On enter scaling timing function

I'm trying to get the animation to scale up and down in a bouncy way using the animation timing function.

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

This just scales linearly without the timing function being applied. What am I doing wrong?

Thanks.

3 Answers

Answers 1

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

But, in the latter case, you have always n keyframes and n - 1 time intervals. IN your case, 2 keyframes and 1 time interval.

The timing function stated on a keyframe applies to the time interval that begins in this keyframe.

So, the correct way to apply a timing function on the keyframes would be on the first one:

@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>

Answers 2

Not sure what you are expecting with the time function; it's working for me on Chrome 59.

That being said...

I am able to get the desired result using keyframes, TranslateX and scale

The code can be greatly shortened but I left everything there 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">

Answers 3

first of allyou need to set the timing function to the icon, not in the keyframes, but i'm not sure, if this is what you want? if you want the icon to scale up, then down, then up again you need to add steps inbetween 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>

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati