The State of CSS Animation

As front-end designers and developers, we use CSS to style, position and create great looking sites. We often use CSS to add movement to pages in the form of transitions or even animations, but we don’t usually go much beyond that.

Animation can be a powerful tool to help our visitors and customers understand and benefit from our designs. There are principles we can apply to our work to make the most of this power.


Use of animation on the web are rising, largely because of the transition and @keyframes additions to CSS. There once was a time when animations and CSS didn’t know one another, but that isn’t the case today. Articles, tutorials, premium courses and even motion guidelines are far more accessible now than they once were. Combining @keyframes with the animation property, along with transition has finally given developers the chance to craft motion properly and lend interfaces a personality and life once unconsidered.

Animation Property & Keyframes

Transitions do a great job of building out visual interactions from one state to another, and are perfect for these kinds of single state changes. However, when more control is required, transitions need to have multiple states. In return, this is where animations pick up where transitions leave off.

To set multiple points at which an element should undergo a transition, use the @keyframes rule. The @keyframes rule includes the animation name, any animation breakpoints, and the properties intended to be animated

@keyframes slide {

 0% { 
  left: 0;
  top: 0;

50% { 
 left: 244px;
 top: 100px;

 100% { 
  left: 488px;
  top: 0;


Vendor Prefixing the Keyframe Rule
The @keyframes rule must be vendor prefixed, just like all of the other transition and animation properties. The vendor prefixes for the @keyframes rule look like the following:


<div class="stage">
   <figure class="ball">
    <figure class="ball-2">
       <div class="innox-logo-anim xx-small circle-logo whiteFG">
        <div class="innox-logo-anim-plane">
          <div class="partA part">
            <div class="cside s1">
        <div class="cside s2">
    <div class="cside s5">
  <div class="part">
     <div class="cside s3"></div>
       <div class="cside s4"></div>
        <div class="cside s6"></div>
  <div class="bg-transparent">

Animations Keyframes Demo
Hover over the ball below to see the animation in action.

.stage {
  background-image: url(;

  border-radius: 50px 50px 0 0;
  height: 236px;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 100% 27%;
  width: 100%;
  margin: auto;
.bg-transparent {
  background: rgba(0, 0, 0, 0.5);
.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
  animation-iteration-count: infinite;
.stage .ball {
  background: rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  height: 100px;
  position: absolute;
  width: 100px;
  display: block;
  -webkit-animation: slide 5s infinite; /* Safari 4+ */
  -moz-animation:    slide 5s infinite; /* Fx 5+ */
  -o-animation:      slide 5s infinite; /* Opera 12+ */
  animation:        slide 5s infinite; /* IE 10+, Fx 29+ */
  animation-direction: alternate
.stage .ball .ball-2{
  background-color: rgba(0, 0, 0, 0.74);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  z-index: 2;
  box-shadow: inset 0px 0px 0px 18px #5025bf;





Recent Post

  • How to Implement File Uploads in Node.js with Multer?

    For many web applications that let users share papers, photos, and other types of material, file uploads are a necessary functionality. Multer is a well-liked middleware used for Handling file uploads in Node.js using Multer the Node.js environment to effectively handle file uploads. We’ll look at how to use Multer to create file uploads […]

  • How to Use Local Storage to Persist Data in a JavaScript Application?

    Data persistence is a key aspect of web applications. In JavaScript, one of the primary tools for achieving this is Local Storage, a part of the Web Storage API. This JavaScript data persistence tool provides a simple key-value storage mechanism within the user’s browser. Unlike session storage, which persists data only during a session, Local […]

  • How to Use WordPress API?

    WordPress stands out as a leading content management system, celebrated for its dynamic capabilities in website and blog development. Renowned for its rich feature set and extensive customization options, WordPress empowers creators to fashion captivating online experiences. In recent times, WordPress has expanded its horizons into the realm of APIs, granting developers a potent tool […]

  • How to Use Post and Pre Hooks in Mongoose?

    In Mongoose, a widely-used library for working with MongoDB, there are valuable tools called “Pre and Post Hooks.” These hooks, also known as “Mongoose Middleware” or “Mongoose Model Hooks,” allow developers to run their own code just before or after specific actions on the database. With “Pre Hooks,” you can customize actions before they happen, […]

  • How To Create Reusable Components in React: Best Practices

    Rеact is a popular library for building usеr intеrfacеs with JavaScript. One of the main benefits of Rеact is its ability to create reusable componеnts that can be used in different parts of your application. Reusable componеnts can help you savе timе, rеducе codе duplication, and еnsurе consistеncy in your UI. However, creating rеusablе componеnts […]

  • Implementing Higher Order Components in Class-Based Components for Code Reusability in ReactJS

    Rеact is a powerful library for building usеr intеrfacеs, and one of its corе strengths liеs in its componеnt-basеd architеcturе. Componеnts arе thе building blocks of Rеact applications, and thеy allow you to crеatе modular and rеusablе piеcеs of UI. Howеvеr, as your application grows, you may find thе nееd for rеusing cеrtain functionalitiеs across […]