CSS3 Animation On enter scaling timing function

Question

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.

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

Answer 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">