INTRODUCTION:

Imagine you’re a magician, but instead of drawing rabbits out of hats, you make web elements dance and move like they have a life of their own. That's exactly what CSS animations do.

The world of web development is significantly progressing and creating websites that leave a lasting impression on users is paramount. The art of capturing the attention of users lies not only in the content and colors of a web page but also in infusing motion and interactivity into the user experience. This is where CSS animations step onto the stage as a powerful tool for web developers like you.

In this guide, we will enlighten ourselves on the principles of CSS animations, offering a step-by-step approach to mastering the art of animating elements perfectly.

PREREQUISITE: To get the most out of this guide, you must have a basic understanding of how to use css(cascading style sheets) and JavaScript is not necessary.

DEFINITION AND PURPOSE OF CSS ANIMATIONS

CSS animations are powerful web design tool that brings life and creativity to websites.

Now, you might be wondering how this magic happens.

It’s very simple, css animations use special components called “keyframes”. By using special keyframes, developers can define and fine-tune how elements should transform and change over time, creating captivating effects like sliding, fading, spinning, and even a lot more.

BENEFITS OF USING CSS ANIMATIONS

With CSS animations, buttons can shimmer, images can slide and glide, and text can fade in and out within seconds. These eye-catching features engage users, enhance user experience and make web pages stand out.

From small subtle touches to mind-blowing visual effects, CSS animations empower web developers to bring dull and static web pages to vibrant masterpieces.

UNDERSTANDING KEYFRAME RULES

CSS animations consist of two components: a set of keyframes that indicate a start and end state and a set of properties that execute the animation sequence of those keyframes. Keyframes are basically the powerhouse of CSS animations and they’re what we use to define our animations, tell which property to change, and how and when it’s going to happen.

To begin creating animations, we need to first define the different animation states in a set of keyframes, and by doing that, we need to create a keyframe rule which will contain the keyframe that will indicate the start and end state of the animation.

We need to use the keyframe rule - @keyframes followed by the name you want to give your animation(it can be slide, fade or spin) and this name will be later referenced when we call our animation sequence using animation properties.

ANIMATION PROPERTIES AND SUB-PROPERTIES.

In CSS animation when you want to make an animation for your web page, you can use the animation property. This property has various sub-properties that help you control and define how your animation sequence will work.

1. Animation-name

animation-name: slide;
animation-name: rotate;
animation-name: bounce;

This indicates the keyframe's name that you want to link with the selector.

1. Animation-duration:

animation-duration :0.5s;

This indicates the number of seconds it takes an animation to complete.

1. Animation-direction:

animation-direction: forward;

This indicates the direction of the animation, deciding whether it should play forward, backward, or alternate between playing the sequence in both forward and backward directions.

1. Animation- delay:

animation-delay:200ms;
animation-delay:15s;

This indicates a delay in a specified time before the animation starts

1. Animation-timing-function:

animation-timing-function: linear;

This indicates the curve that controls the speed of the animation. It determines how fast or slow the animation transitions between different key frames, adding a sense of smoothness and flow to the movement. Here are some property values of the animation speed curve.

• Linear: the animation maintains a constant speed from start to finish.

• Ease: the animation starts slowly, speeds up in the middle, and then ends slowly again

• Ease-in: the animation starts slowly

• Ease-out: the animation ends slowly

• Ease-in-out: the animation starts and ends slowly.

• Step-start: this animation will occur instantaneously with no smooth transition and will begin abruptly.

• Step-end: the animation will happen all at once, concluding abruptly without any smooth transition.

• Steps(int, start/end): This function, "steps," operates with two parameters. The first one represents the number of intervals in the function and must be a positive ‘integer’ greater than 0. The second parameter, which is optional, can be either "start" or "end," determining where the changes of values occur within the interval. If the second parameter is not provided, it automatically takes the value "end."

6. Animation-fill-mode:

animation-fill-mode: none;
animation-fill-mode: both;

This indicates the values that should be applied by the animation before it starts or after it finishes executing its sequence. It sets the initial and final states of the animated element, ensuring that it remains in a specific state when the animation is not active. The possible values are none, backward, forward, and both.

7. Animation-iteration-count.

animation-iteration-count: infinite;

This indicates the number of times an animation should be played.

1. Animation-play-state

animation-play-state: paused;

This indicates the state of animation. It specifies the action of an animation- whether running or paused.

Animation shorthand vs longhand

Going back to our ideas from CSS styling, just like we learned how to write CSS styles using long-hand and short-hand properties to achieve the same results, CSS animations have a similar approach. Instead of writing a long block of code, we can easily write our code in a straight line and still get our desired result.

Long-hand

animation-name; bounce;
animation-duration:0.5s;
animation-direction:forward, backward;
animation-delay: 10s;
animation-timing-function:ease-in;
animation-fill-mode: none;
animation-iteration-count: infinite;
animation-play-state:running;

Short-hand

animation: my_anime 5s ease-out 1s infinite forward,backward running

my-anime: animation-name

5s: animation-duration

ease-out: timing-function

1s: animation-delay

infinite: iteration-count

forward,backward: fill-mode

running: play-state

P.S: You use the animation property only and not the subproperties when using the shorthand style.

Transition vs Animation: choosing the right approach

It's almost impossible to discuss how to add interactivity with CSS animations without mentioning transitions. Transitions complement animations perfectly, offering a powerful tool to smoothly guide users through minor interactions.let’s take a quick look into css transitions.

Similarities between transition and animation

• CSS transitions allow us to specify one or more properties that will smoothly change their values as time progresses

• Both CSS animations and transitions have timing functions that can modify the rate of progression during the specified time. Additionally, they share common easing functions, allowing for smooth and controlled motion.

• Both CSS animations and transitions can be assigned a duration value, specifying the time it takes to transition from one property value to another

• Using event listeners, you can dynamically observe and control animation and transition events based on your requirements

• Both CSS animations and transitions apply visual alterations to DOM elements or pseudo-elements and automatically generate intermediate values.

Differences between transitions and animation

• Unlike CSS animations, transitions require explicit triggering before they can occur triggers such as hovering over with a mouse or clicking on the screen.

• Unlike CSS animations which can loop without any additional effort, transitions are not intended for looping by default.

• Unlike css that allows you to define keyframes which indicates the start and end of an animation, transitions animate an object or element from one point to another.

• Unlike css animation that has challenges in JavaScript due to the complex syntax involved in manipulating keyframes and assigning new values to them, transitions can effectively and easily work In JavaScript.

• Unlike css animation that can operate automatically without relying on any specific user interaction, transitions are typically employed for minor interactions and have a short duration.

Now don’t get confused, you might be asking yourself "when do I use one over the other?" or "how do I choose which one to use?". Let this be your guide

Transitions responds to user actions, you can consider using this method for interactive elements like drop-down menus, ins, tool tips and more.

In contrast, use animations for continuous decorative elements, such as background images or loading spinners. They can be used to enable visual storytelling, illustrate complex concepts, convey emotions, and provide feedback.

Congratulations! You have now gained valuable insights on how to create captivating web experiences. CSS animations is not just about writing a bunch of code but as we’ve seen, they’re a powerful tool in web development.

Keep honing your skills, staying up-to-date with the latest advancements, and exploring new animation libraries and frameworks. The web is ever-evolving, so don’t stop learning and don't hesitate to experiment, innovate, and push the boundaries of creativity

Remember, simplicity and clarity often go hand in hand. Strive for clear and purposeful animations that contribute to a positive user experience. Thanks for reading!!!