, , , ,

An Intro Into CSS Animation

CSS Animation Keyframe Information | Tribu Digital Marketing

CSS is extremely useful when you just need a simple animation and don’t want to dive into JavaScript. In this article we will introduce you to key concepts and the basic structure of CSS animation.


The first step in creating CSS animation is to declare your @keyframes rule. The @keyframe rule is how you control your animation from beginning to end.

Below I have created an animation called ‘example’.

Once @keyframe ‘example’ is declared, we use percentages to control the animation. 0% is the beginning, while 100% is the end of the animation.

Within this step we also need to specify what property we will be animating. In ‘example’, we will be animating the color of some text from red to orange to yellow and then to green. There’s no need to worry about the transitions, CSS will take care of that for us.

Attaching the Animation to an Element

Once a @keyframe rule is declared, it can be used by any element on the page. We’re going to be using it with an <h1> tag.

The <h1> tag we are animating

In order to use our animation on the <h1> tag, we need to use CSS to set the animation-name property to have a value of ‘example’.


There are eight animation properties used to customize your animation within CSS:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

If we want our animation to take 4 seconds to complete and repeat continuously, our CSS would like this:

And our animation would look like this:

See the Pen CSS Animation Tutorial - Color by Alex Fore (@alexTribu) on CodePen.

Easing The last concept we’re going to look at is easing. Easing is used to create a more natural animation. To specify the type of easing we want to use, we need to set the animation-timing-function. Some of the values that can be used are:
  • linear
  • ease (default)
  • ease-in
  • ease-out
  • ease-in-out
To see how this works, we will create a new div with and id of ‘stretch’ and set the CSS values to the following:

See the Pen Animation Tut - Ease by Alex Fore (@alexTribu) on CodePen.

Now let’s set the animation-timing-function property to ‘linear’ to see the difference.

See the Pen Animation tut - linear by Alex Fore (@alexTribu) on CodePen.

Using  ‘linear’ causes the animation to maintain one speed throughout the entirety of the animation. Linear animations tend to feel robotic and are best to be avoided.


Now that you know the basics of CSS animation, it’s time to go play around with some code. You can create your own or feel free to play around with our CodePen

Like our work?

Contact us and let us make your project shine!

Feeling inspired yet? Keep an eye out on our portfolio to see how we’re implementing these trends into our work here at Tribu!

Read About

Let’s Be Friends?

Tribe up your inbox and keep up with Tribu

More to Consider

artificial intelligence (AI) robot - AI Digital Marketing Tribu-blog
Want to Supercharge Your Marketing? Learn How AI is Transforming Digital Advertising
computer and cell phone showing user engagement for tribu blog on 6 tips to increase user engagement
6 Tips to Increase Your User Engagement
Strong Engagement With Nike
Where Does Engagement Live In Instagram Vs. Reality

Meet the People

We work because we are passionate, and we thrive because of our collective experience. We’re fresh, hungry, humble and smart.


Tribu lives at the intersection of award-winning design and branding + measurable digital marketing techniques.

See the work

Super Sudz VIRAL Haunted Carwash
Texas Margarita Factory
Centro San Antonio
Manzanilla Sophia

Join The Tribe