CSS Animation in Production - Common?

According to Can I Use Website - CSS Animation there is around 90% of users with browsers that support CSS animation. Is this something that is used often in production, or are there alternative animation methods for functions like buttons that are better? I ask because I can’t think of any websites where I’ve looked into the source code and found CSS animation happening.

It’s not very common yet. But I think that’s mostly due to the fact that the JavaScript animation libs long lived now and very good.

As the CSS Animation API expands and becomes more optimized I bet we’ll see more of it. That said, if you want to jump in there is a lot to work with and with such good coverage you can have a lot of fun. :slight_smile:

1 Like

For example Codepen uses CSS Animation to wobble the save button:

.unsaved-wobble {
    animation: wobble 0.8s forwards;
    animation-name: wobble;
    animation-duration: 0.8s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

@keyframes wobble {
    0% {
        -webkit-transform: none;
        transform: none
    }

    15% {
        -webkit-transform: translate3d(-20%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-20%, 0, 0) rotate3d(0, 0, 1, -5deg)
    }

    30% {
        -webkit-transform: translate3d(15%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(15%, 0, 0) rotate3d(0, 0, 1, 3deg)
    }

    45% {
        -webkit-transform: translate3d(-10%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-10%, 0, 0) rotate3d(0, 0, 1, -3deg)
    }

    60% {
        -webkit-transform: translate3d(5%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(5%, 0, 0) rotate3d(0, 0, 1, 2deg)
    }

    75% {
        -webkit-transform: translate3d(0%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(0%, 0, 0) rotate3d(0, 0, 1, -1deg)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}
1 Like

Sounds like a good opportunity for me to jump in and start from scratch with CSS animation as I have not learned JS animation at all yet. I appreciate the mention so I can look up what others are familiar with.

That is a cool find, thank you! This is very similar to how I pictured using CSS animation. I would like my buttons and menus to have that JavaScript feel to them and CSS animation looks so easy to create and use.

It most certainly is! I also have a few more resources for you as you launch into this. :wink:

Side note, SVG will also get a lot of mention in these articles and newsletters, it’s another worthwhile subject to dig into.

  • CSS Animation Rocks – A wonderful email course that gives good basics and some insight into more advanced topics. There is also a newsletter attached to this course that is free and highlights all sorts of cool topics.
  • CSS Tricks (a search over their archive) – Chris and crew have been on these topics since the beginning and there is a wealth of information here.
  • Sara Soueidan – Sara is one of those on the front lines of this topic, She is brilliant and has lots of good knowledge about SVG and animation (she has a preference for SVG but still it’s lots of good info)
  • Val Head’s UI Animation Newsletter – Val is in a similar place as Sara, but her focus is User Interfaces/Experiences. So it’s a little more ‘practical’ in tone. You’re more likely to see things in ‘production’ here.
  • Animation at Work – This is the site and newsletter relating to a book of the same name. Rachel Nabors is also one of the leaders of CSS animation, she helped define the current spec. This book is more philosophical in that it’s the theory behind how animation works and why/when you’d want it. It also has a Slack community where these same topics are discussed.

Hope this helps! This is a growing topic and there are many many people out there talking about it. Have fun! Looking forward to seeing what you make!

2 Likes

Bookmarked this for future reference. Fantastic sources, and I thank you for your time!

1 Like