Speed Curves

Speed Curve

If you try running the second example in the Animation Basics lesson, you'll notice that for each path, the paragraph slows down towards the end. Using the animation-timing-function, we can control the change in speed. Here are the possible inputs:

• ease - dafault, speeds up and then slows down (the speed at the beginning is still higher than at the end)
• linear - same speed throughout
• ease-in - starts slow, speeds up
• ease-out - starts fast, slows down
• ease-in-out - speeds up, then slows down, but it is more symmetrical than "ease" Here's one of the previous examples using ease-in:

p {
    position: relative;
    animation-name: paragraphAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in;
}
@keyframes paragraphAnimation{
    0% {
        left: 10px;
        top: 10px;
    }
    25% {
        left: 200px;
        top: 10px;
    }
    50% {
        left: 200px;
        top: 200px;
    }
    75% {
        left: 10px;
        top: 200px;
    }
    100% {
        left: 10px;
        top: 10px;
    }
}

Cubic Bezier

It's also possible to input a more specific timing function using Bezier curves with the cubic-bezier function, which looks like this: cubic-bezier(x1, y1, x2, y2). There are four inputs to the function, and they specify the x and y coordinates of "anchor" points of the necessary Bezier function. There's a great website, cubic-bezier.com, that lets you create a Bezier function, see a preview of its animation, and copy the CSS syntax for it. Here is one example of an animation using cubic-bezier:

p {
    position: relative;
    animation-name: paragraphAnimation;
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(.22,.9,.92,-0.6);
}
@keyframes paragraphAnimation{
    0% {
        left: 0px;
        top: 10px;
    }
    100% {
        left: 600px;
        top: 10px;
    }
}