CSS Animations: Learn CSS Animations from Scratch

Learn how CSS transitions create smooth hover animations by changing properties like width using duration, delay, and timing function settings such as linear and cubic-bezier.

Learn to create and style an interactive HTML button with CSS animations, including hover background and text color changes, borders, and smooth transitions using Visual Studio Code and the Live Server extension.

Learn to create a second button with animated lines on hover using CSS positioning and width transitions, revealing a line from 0 to 100 percent in 1.3 seconds.

Learn to create a third button with a blue after element animation that slides from bottom left to top right via a 0.5s ease-out transition, with hover white text.

Create a css button with id four using relative positioning and two pseudo elements. Animate from the top-right and bottom-left with a 0.4s transition, expanding to size and white text.

Learn to build an animated five button using span and before/after pseudo elements, with hover effects that draw top and side lines through controlled transitions and delays.

Create a six-button with an animated blue after pseudo-element that expands on hover, and changes the button text color to white, using a cubic-bezier transition and absolute positioning.

Create a seventh button with CSS animations, borders, and ::before and ::after triangles, animating and sliding the span text on hover.

Build the eighth button with a relative container and a ::after element that starts as a small circle and morphs into a rectangle via a 0.4s transition, revealing white text.

Learn how to rotate elements in CSS using the transform rotate function, experiment with degrees and turns, and see the effect on hover with a gradient background.

Explore the CSS transform scale function, which multiplies an element’s width and height by a value. Use 1 to keep size, 1.2 to grow 20%, or 0.4 to shrink.

Explore how the translate function moves elements on hover with x and y offsets. See translate(50,0) and translate(0,150); translateX and translateY; note positive and negative values and duration shape motion.

Learn how to apply CSS transforms to skew elements, using skew, skewX, and skewY with specific degree values, and explore how hovering changes the skew effect for a dynamic look.

Explore creating custom CSS animations with keyframes, define 0, 50, and 100 percent styles, set duration, timing, and infinite looping, and apply to properties like width, height, and rotate.

Practice CSS animations by building multiple spinners with unique effects across the next lectures. Create a ball-and-box spinner and a device-like balancing spinner, using scale and trim transitions.

Create divs as rectangles, yellow and green yellow, and rotate them with keyframes from 0 to 360 degrees, using a two-second duration, infinite looping, and a delay for second spinner.

Create a four-circle css spinner by assigning circle identifiers and a shared circle class, then animate with keyframes, delays, and color transitions for a smooth rotating effect.

Build a two circle spinner with inner and outer elements, border styling, and absolute positioning. Animate with a turn animation using cubic-bezier timing for an infinite spin.

Create a ball-in-a-box spinner using a 150px box and a 25px ball, with absolute positioning, four-step keyframes, and a shadow effect in a two-second infinite loop.

Master CSS animations by building a spinner from a circle with a border and pseudo elements, then animate scale and rotation via keyframes for an endless loading indicator.