Is There a Way for Animation-Timing-Function to Apply to the Entire Animation Instead of Each Keyframe

Is there a way for animation-timing-function to apply to the entire animation instead of each keyframe?

You can't apply an easing function over a series of keyframes because you're specifically telling the object to be at a specific point at a specific time. If you applied, say, an ease-in over a series of keyframes, then at 25% the object would behind it's required "checkpoint", eventually accelerating until catching up at 100%.

If your points are more or less equidistant, you can apply:

.animatedobject {
  -webkit-animation-timing-function: linear;
}

and your animation will look more more less good, if a little robotic.

A more natural approach would be to accelerate, maintain speed, and then "brake":

 @-webkit-keyframes ftch {
 0% {
     opacity: 0;
     left: -10px;
     bottom: 12px;
    -webkit-animation-timing-function: ease-in;
 }

25% {
    opacity: 0.25;
    left: 56.5px;
    bottom: -7px;
    -webkit-animation-timing-function: linear;
 }

 50% {
    opacity: 0.5;         
    left: 143px;
    bottom: -20px;
    -webkit-animation-timing-function: linear;
 }

 75% {
    opacity: 0.75;
    left: 209.5px;
    bottom: -24.5px;
    -webkit-animation-timing-function: linear;
 }

 100% {
     opacity: 1;
     left: 266px;
     bottom: -26px;
    -webkit-animation-timing-function: ease-out;
 }
}

If webkit supported animations along a path you wouldn't need these keyframes and you would have no trouble applying the easing to only two keyframes.

Can I make the animation-timing-function affect the whole animation rather than each step of the animation?

An idea is to split the animation and instead of translation you can use top/left then you can easily control each one alone:

.box {

  width:60px;

  height:60px;

  background:red;

  position:relative;

  animation: bounce 2s infinite linear alternate,

              move 2s infinite ease-in  alternate;

}

@keyframes bounce{

    0%{

        transform:rotateZ(0deg);

    }

    50%{

        transform: rotateZ(30deg);

    }

    100%{

        transform:rotateZ(0deg);

    }

}

@keyframes move{

    0%{

        top:0px;

        left:0px;

    }

    50%{

        top:125px;

        left:30px;

    }

    100%{

        top:250px;

        left:60px;

    }

}

<div class="box">

</div>

Different timing functions for different parts of css3 keyframe animation? (accurate bounce)

Rather than specifying a timing function for the entire animation, you can specify for each key frame. The function represents how the the values are interpolated from the beginning to end of the respective key frame.

Here's an example by adding an ease function to the keyframes 20%, 40%, 60%, 74%, 84%, 92%, 100%.

@keyframes bounce {

  20%, 40%, 60%, 74%, 84%, 92%, 100% {

    transform: translate(0, 0);

    animation-timing-function: ease;

  }

  0% {

    transform: translate(0, -100vh);

  }

  30% {

    transform: translate(0, -40vh);

  }

  50% {

    transform: translate(0, -20vh);

  }

  68% {

    transform: translate(0, -10vh);

  }

  80% {

    transform: translate(0, -5vh);

  }

  88% {

    transform: translate(0, -2vh);

  }

  96% {

    transform: translate(0, -1vh);

  }

}

.ball {

  background: #ff0000;

  border-radius: 50%;

  position: absolute;

  top: 500px;

  width: 50px;

  height: 50px;

  animation: bounce 3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s 1 normal forwards;

}

<div class="ball"> </div>

Is it possible to have different transitions for the same animation?

The transition property doesn't do anything inside of keyframes. You can either use the transition property to specify how the paint transitions between selectors/transforms (ie, default and :hover), or you can use keyframes to specify how it transforms over time range (ie, from/to, or 0%, 50%, 100% etc).

When you think about it, they're two separate ways of expressing the same information.

You can use the animation-timing-function property in the individual keyframes if you want more control over transitions. Just know it wasn't supported in Safari (iOS/OSX) until around 2015, so you might run into trouble if you need to support those versions.

How to know programmatically which is the last object that has the animation

The Web Animations API can inspect animations.

document.getAnimations() returns all animations found in the document. Each of them has an effect property, and in your case, they are all of the type KeyframeEffect.

• animation.animationName returns the animation name as stated in the CSS @keyframes declaration.
• animation.effect.target returns the element targeted by the animation.
• animation.effect.getComputedTiming().endTime returns the time the animation ends.

From there you can compare and filter the information you need.

document.getAnimations().forEach(animation => {
    console.log(
        animation.animationName,
        animation.effect.target.id,
        animation.effect.getComputedTiming().endTime
    );
});

.r1 {
     animation-name: move1;
     animation-delay: 2.5s;
     animation-duration: 1s;
     animation-iteration-count: 1;
     animation-timing-function: ease-in;
     animation-direction: normal;
     animation-fill-mode: forwards;
}
 .c1 {
     animation-name: blink;
     animation-delay: 0.5s;
     animation-duration: 1s;
     animation-iteration-count: 2;
     animation-timing-function: ease-in;
     animation-direction: normal;
     animation-fill-mode: forwards;
}
 /*.text1 {
     animation-name: scl;
     animation-delay: 5.5s;
     animation-duration: 1s;
     animation-iteration-count: 2;
     animation-timing-function: ease-in;
     animation-direction: normal;
     animation-fill-mode: forwards;
}*/
 .r2 {
     transform-origin: center;
     transform-box: fill-box;
     animation-name: gr;
     animation-delay: 3.5s;
     animation-duration: 2s;
     animation-iteration-count: 1;
     animation-timing-function: ease-in;
     animation-direction: normal;
     animation-fill-mode: forwards;
}
 .r3 {
     animation-name: move2;
     animation-delay: 7.5s;
     animation-duration: 1s;
     animation-iteration-count: 1;
     animation-timing-function: ease-in;
     animation-direction: normal;
     animation-fill-mode: forwards;
}
 @keyframes move1 {
     to {
         transform: translateX(200px);
    }
}
 @keyframes blink {
     from {
         opacity: 0;
    }
     to {
         opacity: 1;
    }
}
 @keyframes gr {
     from {
         transform: rotate(0deg);
    }
     to {
         transform: rotate(359deg);
    }
}
 @keyframes scl {
     to {
         transform: scale(1.1);
    }
}  
 @keyframes move2 {
     to {
         transform: translateY(400px);
    }
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
  <rect id="r1" class="r1" x="10" y="20" width="100" height="100" fill="red" />
  <rect id="r2" class="r2" x="10" y="130" width="100" height="100" fill="green" />
  <rect id="r3" class="r3" x="10" y="240" width="100" height="100" fill="blue" />

  <circle id="c1" class="c1" cx="50" cy="400" r="40" fill="orange" />
  <text class="text1" id="text1" x="80" y="500" font-size="30" fill="red">I love SVG!</text>
</svg>

CSS3 Animation On enter scaling timing function

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>

keyframe animation on load

Hey you can use animation-fill-mode:forwards this will stop the animation on the last frame.

---

Related Topics