Do you know how to make an animation using CSS only and no JavaScript?. Today we are going to dive into a fun little CSS3 Animation demo that will show you exactly how easy it is to do.

Sometimes when you visit websites you may see some cool animations to help get a message across. This could be for branding, enhancing the website or just for fun. This example is just a fun way to show you how easy it is to implement without JavaScript.

CSS3 has a great feature in it called Keyframes which specifies different values along the different stages of an animation cycle. These are initiated using the @keyframes rule.

Below we are creating an empty div with a class of “box”. This will be targeted within the CSS to show a 100px logo box within the browser.

HTML

<div class="box"></div>

Here is the @Keyframes rule that contains all the action points between 0% and 100%. In this example, the action points are 25%, 50%, 75%, and 100%. The comments in the code explain in detail what each action point is doing, but this is allowing the box to move to all four corners of its container anti-clockwise starting top left and finishing top left.

CSS3 @Keyframes

@keyframes circleThePage {
  0% {    /* top left starting point */
    left: 0;  
    top: 0;
  }
  
  25% {  /* bottom left 2nd point */
    left: 0;
    top: calc(100% - 100px); /* 100% from top minus height of box */
  }
  
  50% {  /* bottom right 3rd point */
    top: calc(100% - 100px); /* 100% from top minus height of box */
    left: calc(100% - 100px); /* 100% from left minus width of box */
  }
  
  75% {  /* top right 4th point */
    left: calc(100% - 100px); /* 100% from left minus width of box */
    top: 0;
  }
  
  100% { /* back to top left starting point */
    left: 0;
    top: 0;
  } 
}

This rule is targeting the “box” class and giving it a size, background image and declaring the @Keyframes rule created called “circleThePage” within “animation-name”. Other CSS properties are used to help control the animation such as duration, fill-mode, direction, iteration-count, and timing.

CSS

.box {
  position: fixed;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-image: url('https://robdoylecreative.com/wp-content/uploads/2019/12/header-logo.png');
  animation-name: circleThePage;
  animation-duration: 8s;
  animation-fill-mode: forwards;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: linear; /* or ease etc.. */
}

The CodePen below shows the animation in action. These settings can be changed to allow all sorts of cool effects and customization.

Animation in Action

See the Pen CSS3 Animation Mini Project – Skim the Edge by Rob Doyle (@RobertMDoyle) on CodePen.

Conclusion

Knowing how to make an animation using CSS only is a useful skill. Normally you would expect JavaScript to be hiding somewhere within this sort of code. Not in this case. Its just CSS3 and one empty div.