CODEWITHSUNDEEP
cssanimation
Harry
Harry

Reputation: 54969

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.

Upvotes: 7

Views: 434

Answers (3)

vals
vals

Reputation: 64244

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>

Upvotes: 7

rebecca
rebecca

Reputation: 963

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>

Upvotes: 1

I haz kode
I haz kode

Reputation: 1635

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

Upvotes: 1

Related Questions