Introduction to CSS Animations

◇ What are CSS Animations?

CSS animations allow smooth, visually engaging transitions between styles using Keyframes without the need for JavaScript

Keyframes define stages of the animation, specifying how an element’s style changes over time.

◈ Where would I use css animations?

1. Loading Indicators: Animated spinners or progress bars to show loading states.

2. Sliders & Carousels: Animate sliding images or content sections.

3. Scrolling Effects: Animate elements as users scroll down the page.

4. Notifications: Fade in/out or slide in alerts and messages.

◆ Demo Code 1:

Here's a really stretched rectangle. This rectangle color gently transitions from coral to yellow then to coral again. The color changes over 3 seconds, in an infinite loop. We shall go over this on how we can define animations.

◇ Key Properties in CSS Animations

animation-name: Specifies the keyframes.
animation-duration: Time for one animation cycle.
animation-timing-function: Defines the speed curve (e.g., linear, ease).
animation-iteration-count: Specifies how many times the animation plays.

◇ Using Keyframes

Type 1: `from` and `to`: Simplified keyframe syntax for start and end states. (respectively)

Type 2: Percentages: Define multiple stages (e.g: 0%, 50%, 100%) for complex animations.

◈ General Structure of Defining an Animation:


                                        @keyframes [animation-name] { 

                                            0% {    
                                                [any property - (eg: background-color: red)]
                                            }       


                                            50% {
                                                [any property - (eg: background-color: blue)]
                                            }       


                                            100% {
                                                [any property - (eg: background-color: green)]
                                            }       

                                        }

                                        



                                        .classname { 

                                            [animation]: [anim-name], [anim-duration], [anim-timing-function], [anim-iteration-count] 

                                        }

◆ Demo Code 2:

Above, are a few boxes. They spin 360 using the transformation property, rotate. These rotate 360 every 2 seconds, in an infinite loop. Their speed is kept consistent using the the linear speed property.

◈ Advanced Animation Techniques

Using properties like `animation-direction: alternate` and combining transformations for dynamic effects like bouncing.

◈ Why use css animations?

1. Ease of Use: Simple to implement without the need for Javascript.

2. Responsive: Easily adapts to different screen sizes and devices.

3. User Experience: Adds interactivity and visual appeal to web elements.

4. Performance: They are optimized by browsers for smooth and efficient rendering.

◆ Demo Code 3:

Here are a few rectangles. They bounce up and down using the transformation property, translateY. The Rectangles Move up by 50px, moves back down, returns to its default state & starts doing the animation again looping over an infinite state. We use the 'animation-direction' property to prevent choppy animations that may appear.

◇ Practical Example: Animated Button

More complex animations that use Transformation & Transition properties.

Demo Code 4:

Here's A button. It firsts, scales up to 1.1, then shrinks down to its default size.

This process uses the transform property scale() & repeats over 1.8s

Simultaneously, when hovering, the animation stops, and the button shifts from green to orange.

This process uses the transition property & a hover state.