As marketers, it’s important to come up with content that’s not only informative, but also engaging.

Some marketers achieve that by adding animation to their articles — just look at any BuzzFeed article filled with GIFs.

monkey gif

Source

Animations are a fun way to engage users and draw attention to your website’s content. But there’s so much more that you can do with animation besides using GIF memes.

In the early days, simple animations were made using Flash. However, using Flash (for web content) can slow your website down.Free Intro Guide to HTML & CSS [Download Now]

Since speed is an important factor for SEO and the user experience, Flash isn’t a great fit for modern marketers trying to rank in relevant search.

Animations that don’t slow down your website can also created using code. One way to create animations is by using Javascript, which is one of the most difficult programming languages to learn.

The good news?

To create animations, you can use CSS (cascading style sheets), which is a lightweight coding language that pairs perfectly with HTML.

What are CSS Animations?

In a nutshell, CSS describes how HTML elements appear on a webpage.They can be static (nonmoving) or animated.

CSS animation is executed by creating a series of elements that gradually change from one style to another. There’s no limit to the number of times you can set an element to transition, but you do have to define which CSS properties to change.

Some animation properties that you have the ability to modify are color, background, and motion. These may not seem like much, but when you put everything together, the possibilities are endless.

To create a CSS animation, you must first understand keyframes and animation properties.

  • @Keyframes are the foundation of CSS animations. They indicate the start and end of the animation and describe how each element should behave at each stage of the animation.
  • Animation properties pair CSS elements with @keyframes to further establish the nature of the animation.

There are several other additional animation properties that you’ll want to get familiar with as you learn more about CSS animation, but the rest of this article will focus on how to use CSS animation delay.

CSS Animation Fade-In Delay

The animation-delay property sets how much time will pass before the animation starts. It’s expressed in seconds and milliseconds.

This property has three predefined values: time, initial, and inherit.

First, <time> sets a certain number of seconds or milliseconds before the animation starts. When the value is positive, such as 2s or 500ms, the animation begins after that amount of time has passed.

When the value is negative, the animation begins as if it’s been playing for the specified amount of time. For instance, when the value is animation-delay: -2s, the animation begins immediately, but two seconds into the sequence.

Cool, right?

Second, <initial> returns the property to the default value for the element.

Third, <inherit> turns the property into a child of the parent element.

For any animation, you’ll also want to define animation-duration and animation-name. As you might expect, animation-duration defines how long the animation will run and animation-name creates an individual reference point for a particular animation.

Here are a few straightforward CSS animation delay code examples:

1. Animation that starts after 300ms

div {

animation-delay: 300ms;

}

2. Animation that starts after -300ms

div {

animation-delay: -300ms;

}

You can also test out CSS animation delay CSS code for yourself with this working CodePen example or simply view the different animation delay options below. 

Animation Delay: 1s

1s animation delay

Animation Delay: -1s

-1s animation delay

No Delay

no animation delay

All Animated

all animated

CSS Animation Delay Between Iterations

Animation delays are especially useful when you want to set your animation to delay between iterations or fade in.

While there are no specific properties for "CSS animation delay between iterations" or "CSS animation fade-in delay", you can certainly achieve these effects by combining animation-delay with the other animation properties such as:

  • animation-timing-function: Defines the speed of the animation. Predefined values for this property include: ease, ease-in, ease-out, ease-in-out, linear, initial, and inherit.
  • animation-iteration-count: Sets how many times the animation will play. The value can be: #, infinite, initial, or inherit. You can set CSS animation delay between iterations for a period of time when the animation delays before it starts playing again. This is useful when you want the animation to run multiple times but also want to create a pause between each iteration. You can achieve this by declaring the animation multiple times with a specific animation-delay for each.
  • animation-direction: Defines the animation’s direction when triggered. The value can be normal, reverse, alternate, or alternate-reverse.
  • animation-fill-mode: Sets which animation styles apply before or after the animation duration. Values include: backwards, forwards, both, and normal.
  • animation-play-state: Defines the state of the animation (i.e. playing or paused).
css animation delay

The top block is ease-in, the bottom is ease-in-out. Try cubic-bezier.com yourself to see how timing functions compare.

To apply the fade-in effect, use the <div class="fade-in"> tag.

There are many creative ways to style your animations, some of which you can only achieve after you have mastered the basics.

CSS Animation Delay

When done well, CSS animations can provide a valuable interface for interaction and gathering feedback on important issues. They can also enhance the customer experience and add personality to your brand.

There are many more amazing things to do with CSS and its counterpart HTML. It’s not only exciting to tinker with the tools, but the skills you learn will help you design more effective online marketing materials.New Call-to-action

 css introduction

Originally published May 15, 2020 3:37:19 PM, updated May 15 2020

Topics:

CSS Animation