Firstly, what are CSS animations?🤔

CSS animations are CSS features/properties that make it possible for us to modify a change in one or more style properties of an element, as well as control various aspects of the animation such as color, height, or width. It also makes it possible to animate transitions from one CSS style configuration to another.

Animations consist of two components: a style describing the CSS animation and a set of keyframes that indicates the start and end states of the animation style, as well as possible key points. Each animation needs to be defined with the @keyframes at rule, which is then called alongside the animation property. By using CSS animation, elements can be rotated, slanted, squashed, spun, and stretched🤭.

Animatable CSS properties

Not all properties of CSS can be animated like background- image. The list of animatable CSS properties such as background-color can be found here

Let's take a look at some specific types of CSS animation below.

Types of CSS animations

Since there are thousands of types of CSS animation, well for the case of the topic treated we'll limit our focus to some of the most common and coolest types you will see on the web.

Text animations

Animated typography can immediately capture the attention of your visitors. Of the many ways, you can animate text on your site with CSS, adding a rainbow effect, shadow, glitch effect, and gooey effect are among the most common.

Below is an example of a handwriting animation in which the visitor watches the text being written on the page.

Color animations

You’ll often see the background of a web page animated to alternate between colors, as in the example below.

Color animations can also be applied to text, buttons, borders, and other elements on the page, making them ideal for drawing the visitor’s eye to a specific point on the page.

Slide-in animations

Using this CSS animation, you can have an element slide in from the top, bottom, left, or right of the screen to grab the visitor’s eye. You can also combine the slide-in animation with other effects to further customize your design. In the example below, the slide-in animation is combined with a blurred text effect so that the company name slowly comes into focus.

Wave animations

The Wave animation is a unique use case of the rotate animation. To create a CSS wave animation, you need to create multiple HTML objects to represent your waves. Then you’ll apply the rotate animation to each wave with different background colors and values for the animation-timing property. You can also experiment with opacity.

The effect will look something like the demo below

Glow animations

Glow animations can contribute to the ambiance of your site. For example, to promote an event on your site, you might add neon glow text against a dark background to set a party mood. You can also use the glow effect on buttons, borders, loading animations, hover animations, and more.

In the example below, the gradient button glows when the user hovers over it so that clicking it seems more appealing.

Bounce animations

Let’s say you don’t want an element to slide in. You want it to bounce in for a grander entrance. In that case, you can use the bounce animation. Coding this animation requires a few animation sub-properties, including the timing and delay function, to be configured to make the element’s bounce feel more natural.

This animation is particularly common on loading pages, as shown in the example below.

Hover animations

To enhance your site’s interactivity, you can create a hover animation. This type of animation occurs when a site visitor hovers over an element on the page. You can have elements zoom, flip, rotate, or even stop playing on hover. In the example below, when click on the picture it changes opacity, color ,and also rotates it.

Setting animations with JavaScript and CSS

Do you know that animations can be created using JavaScript and CSS?🤔

JavaScript animations are done by programming gradual changes in an element's style. The changes are called by a timer. When the timer interval is small, the animation looks continuous. If there were to be a combination of the two the animation will look so smooth, attractive, and presentable. There are various ways of creating animations with JavaScript and CSS. We will use the example below to shed more light.

Most of us might be familiar with the famous Star Wars. So in this case we used both CSS and JavaScript for our animation making it look like the movie intro itself🤓. JavaScript in this case made it possible for each letter to observe a turn by splitting each letter wrapped into spans.

In this article, we have looked at an introduction to CSS and we talked about what CSS animations are, animatable CSS properties, types of CSS animations, and also setting animations with CSS and JavaScript.