koderlabs Blogs
Popular CSS Animations

Create These Best CSS Animations With Coding Guidelines

Humans respond better to moving objects as it is a natural built-in reaction to anything that shows movement. Similarly, having animations within your website or mobile app catches the eyes and attention of the user, bringing their focus to the important elements of your software product. When animation is done skillfully, it enhances the user experience by adding personality and oomph into your interface – take gaming apps, or gamified apps as an example.

What exactly is CSS animation?

CSS animations, hence, is a method of bringing certain HTML elements to life without having to exhaust your processor or take the help of Flash. In addition, with this powerful tool, you can produce seamless 60fps animations.

There are two basic building blocks that make up a CSS animation.

  1. Keyframes: It defines the stages and styles of the animation.
  2. Animation Properties: this assigns the @keyframes to a particular CSS element and defines how it is animated.

Sub-properties of the animation property include:

  • animation-name : specifies the name of the @keyframes at-rule.
  • animation-duration : configures the length of the time that the animation is supposed to take to complete one cycle.
  • animation-timing-function : configures the timing of the animation – which is determining how the animation transitions through keyframes by establishing acceleration curves.
  • animation-delay : configures the delay between the time the animation is loaded and the starting of the animation sequence.
  • animation-iteration-count : configures the number of times animation should be repeated.
  • animation-direction : configures whether the animation should alternate direction on each run or simply reset to the original point and repeat itself.
  • animation-fill-mode : configures what values are applied before and after the execution of animation.
  • animation-play-state : allows you to pause and resume the animation sequence.

Rule of thumb:

A little movement goes a long way. There is no need to overblow the animation as it can be distracting and downright irritating. We need small movements to catch their attention and compel them to perform the necessary action, if necessary.

Some of the best animations that you witness online stem from Disney’s 12 principles of animation. So it would be great for your learning process to go through them as well.

Now to the main course, that includes some of the best examples of CSS animation that you can recreate for yourself.

Tumbling Lettering

If you click on the title above, you would see how Google’s ‘Game of the Year’ showcases a fun CSS animation on the homepage where the title words appear animatedly and sort of crash into each other. It was simple, not too many movements and neat!

You can achieve this as well, here’s how:

  • Define the webpage document with HTML.
  • It comprises of HTML document container that includes the head and the body section.
  • The head is used to load CSS and JavaScript resources, while the body contains the content displayed on the page.
  • The page then consists of three h1 tags that will show different variations of the chosen animated effect.
  • While these tags can contain any text, their respective animation is defined by the names within the class attribute.
<!DOCTYPE html>
<html>
<head>
<title>Off Kilter Text Animation</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script src="code.js"></script>
</head>
<body>
  <h1 class="animate backwards">The Animated Title</h1>
  <h1 class="animate forwards">The Animated Title</h1>
  <h1 class="animate mixed">The Animated Title </h1>
</body>
</html>

Now, create a new file names ‘code.js’.

  • We need to find all the page elements with the animate class and create an array list that represents all the word of the inner text.
  • The page content isn’t available until the page loads completely. Hence, this code is placed inside the window’s load event listener.
  • The word content of the animation items needs to be placed inside a span element.
  • In order to achieve this, the existing HTML content needs to be reset to blank, then a loop is used to make the word in the identified ‘words’ list a span element.
  • Moreover, an animationDelay style is applied.
window.addEventListener("load", function(){
	var delay = 2;
	var nodes = document.querySelectorAll
(".animate");
	for(var i=0; i<nodes.length; i++){
		var words = nodes[i].innerText.split(" ");
		nodes[i].innerHTML = "";
for(var i2=0; i2<words.length; i2++){
			var item = document.createElement("span");
			item.innerText = words[i2];
			var calc = (delay+((nodes.length + i2)/3));
	item.style.animationDelay = calc+"s";
			nodes[i].appendChild(item);
}
	}
}
  • Now create a new file, called style.css.
  • Set the presentation rules within this file that will be part of every word element in your animation; which, in turn, is controlled by their span tag.
.animate span{
	display: block;
	position: relative;
	text-align: center;
}
  • Animation elements that have forwards and backwards class have a particular animation applied to them. In this step, the animation is applied to span elements whose parents container has both the animate and backwards or forwards class.
  • If you look at the code below, you will see there is no space between the animate and backwards class reference. This indicates that the parent element must have both.
.animate.backwards > span{
	animation: animateBackwards 1s ease-in-out 
forwards;
}
.animate.forwards > span{
	animation: animateForwards 1s ease-in-out 
forwards;
}

The mixed animation is defined through the same settings used for the forwards and backwards animations. In the case of applying animations, the nth-child selector is used to
apply alternating animation settings.

.animate.mixed > span:nth-child(even){
	animation: animateBackwards 1s ease-in-out 
forwards;
}
.animate.mixed > span:nth-child(odd){
	animation: animateForwards 1s ease-in-out 
forwards;
}

As you can see above, the backwards animation is applied to every even-number child, whereas, the forwards animation is applied to every even-number child.

There is an initial ‘from’ starting position and ‘to’ position being the final state of the animation. The latter state sets the elements with an adjusted vertical position and rotation state. However, the starting position takes these values as 0.

@keyframes animateForwards {
	from { top: 0; transform: rotate(0deg); }
	to { top: .9em; transform: rotate(-15deg); }
}
@keyframes animateBackwards {
	from { top: 0; transform: rotate(0deg); }
	to { top: 1em; transform: rotate(25deg); }
}

2) Stagger On

One of the best ways to enhance the depth of your animations is by offsetting your animated elements. We know that a JavaScript trigger is to launch a selection of animations based on scroll position. But in CSS, there is a useful property that can do wonder to your animation – animation-delay.

Take an example of having a grid of images that need to animate into a frame whenever a user scrolls. There are many ways to achieve that, but the obvious route would be by adding classes to the elements as they enter the viewport. This could add load to your browser. However, that can be curbed by adding a single class to a container element and defining animation delays on child elements.

#parent{
.child{
     animation: animationName 1.5s ease-in-out 1 forwards;
@for $i from 1 through 20{
     &:nth-of-type(#{$i}){
animation-delay:#{$i/10}s;
                 }
}
    }
}

You can see above that with the preprocessor like SCSS you can loop through each :nth-of-type selector and then apply an animation-delay based on each child element’s numerical value. Another thing that you can notice is that each increment is reduced to a fraction of a second.

3) The Reveal Effect

This content-reveal trend is hot these days and it is best to gain user’s attention and to engage them. you must have seen on plenty of websites when a block of color grows from one side (either horizontally or vertically) and flips revealing content (text or image) underneath? It may seem that there is a lot that is going on here, but it is fairly simple and based on a few things. How?

  • Set up your element positioning.
  • Define it relative.
  • Define a transform-origin and in the parent element, it is best to use the starting position.
  • Since we want this element hidden at first, so we would use a scale transform along the axis to shrink it.
  • A pseudo-element to mask our parent, setting the transform-origin to the opposing option.
  • Lastly, string together the animation by using two options; either the timing functions or delays to offset each.

Click on this link to see it all in action.

Want these animations in your project?

These were just some of the many great CSS animation examples that we at KoderLabs, a software development company in Houston can incorporate into your projects, ensuring an exciting UI/UX design that is bound to give your business higher user-engagement and competitive edge. So you have a great idea that needs to materialize? Connect with KoderLabs now.

Muniza Ashraf

Muniza Ashraf is a software engineer turned technical writer with extensive experience in various niches, especially all-things-tech-related. If she isn’t writing, she is researching to bring information in the best way possible. Currently, she is associated with KoderLabs, a custom software development company in Dallas.

Add comment