Native CSS3 Animations

Native CSS3 Animations

Although popular libraries like Animate.css make it easy to add CSS animations to your project, they are largely comprised of common motions such as “bounce”, “shake” and other stock movements that can feel rather stale when overused. By taking advantage of the animation properties built in to CSS, you can create much more complex and customized animations far beyond just motion. CSS animations can effect element color, size, position or any other property available in the CSS3 specification. This post will give an introduction to getting started with the native CSS3 properties and some examples of possible uses for them.

Adding animation to an element

To give an HTML element animation, the first two steps are to declare a name for the animation and a duration. This is done with the animation-name and animation-duration properties:

#myAnimation {
    animation-name: color-change;
    animation-duration: 5s;
}

 

animation-duration can accept any value in seconds or milliseconds (declared using s or ms after an integer).

Creating the animation

Once you have declared a name and duration, it’s time to build the animation. This is done using the @keyframes rule, followed by the animation name:

@keyframes color-change {
    
}

 

Inside of the @keyframes rule will be a rule for each “frame” of the animation, designated by a percentage value from 0% to 100%. 0% is the very beginning of the animation, 100% being the end, with any percentage values possible in between. This can be thought of much like a video or flipbook, where each page of the book is a unique frame that when combined, creates motion:

@keyframes color-change {
    0% {
        background-color: black;
    }  
    50% {
        background-color: gray;
    }
    100% {
        background-color: white;
    }
}

 

In the example above, the color-change animation will change the background-color of the #myAnimation element from black at 0%, to gray at 50% then finally to white at 100%.

The power of using custom animations, though, is that you can change absolutely any CSS properties, with any level of incremental change in frames. A good example of this is for :hover pseudo-classes. CSS :hover states are often used to apply a color or minor stylistic change when an element is hovered over with a mouse, but animations allow these changes to be much more detailed.

button:hover {
    animation-name: button-anim;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}
@keyframes button-anim {
    0% {
        background-color: blue;
    }
    50% {
        transform: scale(2.1);
        background-color: dodgerblue;
    }
    75% {
        transform: scale(2.5);
        background-color: white;
    }
    100% {
        transform: scale(1.5);
        background-color: blue;
    }
}

 

In the example above the button-anim animation effects any button element when it’s hovered over. Its background-color changes in four equal steps over a duration of 5 seconds, with the size of the element itself changing in discreet, unique steps as well (original, to 2.1x, to 2.5x, to then 1.5x the original).

One additional property included in the example above is the animation-fill-mode property. This property can be used to indicate how styles should be applied before (and after) the duration of the animation has completed. Using animation-fill-mode: forwards indicates that the styles in the last frame of the animation (those in the 100% rule) will remain applied. Without the addition of the animation-fill-mode property, the styles of button would revert back to their original state after the animation had completed.

Conclusion

CSS animations can be very complex and detailed, with up to 100 distinct frames able to be specified. Considering this feature is available natively in vanilla CSS, they are a great way to add visual interest and complexity to a web project, well-supported in all modern browsers.

Resources

Post a Comment

Comments are moderated. Your email is kept private. Required fields are marked *

© 2019 Sunlight Media LLC