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.
Keyframes
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’.
Customizing
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.
- linear
- ease (default)
- ease-in
- ease-out
- ease-in-out
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.
Conclusion
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!
