Creative Advanced CSS & JavaScript Animations - 150 Projects

Learn how CSS 2D transforms change element size, shape, and position using scale, translate, rotate, and skew, applying to elements like divs and images.

Move elements with the CSS translate function using transform translate, translateX, and translateY to shift objects along the x and y axes. Apply hover-triggered transitions for smooth 2D movement.

Explore how the css transform scale function resizes elements by width and height, using scaleX, scaleY, or two-value scale to create hover zoom effects on images.

Rotate elements in 2d using the rotate function, exploring degrees for clockwise and counterclockwise turns, and alternative units like turns and gradients.

Learn to skew elements with the CSS transform and skew function, using skew X for horizontal and skew Y for vertical distortions, and combine both for simultaneous skew in degrees.

Explore the transform origin property in CSS, learning how the reference point affects rotation and pivot—from center to top left, using keywords like top, bottom, left, right, percentages, and pixels.

Apply translate z and perspective to build a 3d effect on a 2d screen, understanding how perspective controls depth and the image moves toward or away from the viewer.

Explore CSS 3D rotation using transform rotate with a 500px perspective, rotating elements on the x, y, and z axes and applying hover effects.

Create creative button effects by building hands-on examples that apply css transforms and transitions learned earlier.

Create a creative rotating button effect with CSS using a before pseudo element as a yellow background that rotates from bottom left on hover, with transform-origin and transition.

Create a CSS swipe hover button effect using a full-width before pseudo element that slides from left to right and changes text to white on hover.

Create a dynamic button hover effect using css, via pseudo elements before and after, rotating along the x and y axes with smooth transitions to reveal text and color.

learn to build a CSS hover button that increases boldness, letter spacing, and border thickness using a Roboto font, with smooth 0.5s transitions.

Create a top-to-bottom swipe effect with text using CSS by modifying the before pseudo element, hover reveal centered with flexbox.

Create a hover button effect where the background changes to red and a white line crosses the link via a before pseudo-element, using translate and rotate 45deg with overflow hidden.

Create a two-layer hover effect on a link (anchor tag) using before and after pseudo elements, positioning, transitions, and transforms to swap layers on hover.

Create an interactive hover effect by using a before pseudo-element to scale a dark gray background behind a link, with centered content via flex box, transitions, and overflow hidden.

Create a dynamic CSS button hover effect that fills with a red background from top to bottom using a before pseudo-element, height transitions, and border-radius tricks, with text color changes.

Create a three-layer CSS button hover effect with green and red backgrounds using before and after pseudo-elements, transform rotate X, and smooth transitions on hover.

Create an interactive button hover with layered backgrounds that swap left to right, rotating on the y axis while fading and resizing, using before and after pseudo elements.

Learn to create a CSS hover button with three circles using ::before and ::after, box-shadow duplication, and a growing yellow background that covers the link while the text remains visible.

Learn to create a stylish button hover effect with two layered backgrounds using css before and after pseudo-elements, a 3d rotate on the x axis, perspective, and hover color changes.

discover a creative split button hover effect in css that uses four yellow parts created with before and after pseudo-elements on an anchor and a span, with transitions and delays.

Build a hover button with long red left and top borders and yellow bottom and right borders using before and after pseudo elements, swapping positions with CSS transforms and transitions.

Learn to create a creative border growing button effect with CSS, using before and after pseudo elements, hover transitions, and animated borders on the top left and bottom right.

Build a hover button where a black background fades in and rotates behind the word, while the first letter B enlarges and rotates with a span and its before pseudo-element.

Build a four-border button hover effect in CSS using before and after pseudo elements. Animate top, bottom, left, and right borders from their edges for a synchronized, dynamic reveal.

Learn to build a two-cut button hover effect with CSS, using the before pseudo element to create top and bottom cuts, and animate width, color, and rotation on hover.

Create a two-part skewed button hover effect in CSS, using red and blue halves with before and after pseudo elements, and reveal text through transitions on hover.

Create a pulsing button effect with CSS using a before pseudo-element to grow a white background on hover, while the text moves and a shadow appears, with an active state.

Learn to create a diagonal swipe button effect with borders in css, using before and after pseudo elements and hover transitions to reveal the link text.

Learn to create a four-line button hover effect with a shimmering blue glow that scales the background using box-shadow and css transitions.

Explore a glassmorphism button hover effect that uses letter spacing, two halves, a moving semi-transparent layer, and before/after pseudo elements to create a blurry, shining hover.

Explore creative image effects using CSS transforms and transitions. Build several examples together to apply what we learned about transforms and transitions.

Master a fade in hover effect that zooms and rotates an image while revealing a semi-transparent caption overlay with a heading and a paragraph.

Learn to create a swipe hover effect with a left-to-right caption slide, semi-transparent black background, and image zoom with rotation using CSS transforms.

Create a hover swipe effect with CSS where the image shifts right and the black caption slides in from the left, using translateX (and translateY for vertical versions), revealing space.

Create a CSS hover image effect where the caption slides up from the bottom to 30% of the container height while the image moves up by the same distance.

Create an interactive image hover effect by sliding a semi-transparent background over the image and fading in the caption with css transition delays, using a before pseudo-element.

Explore a hover zoom and rotate effect for images using CSS transforms, transitions, and overflow handling. Learn to set container sizes, apply scale(1.2) and rotate(9deg) for a polished animation.

Create an image hover effect with a bottom-right gray overlay (via the before pseudo-element) and a caption revealed with flexbox and staggered transitions.

Implement a sophisticated image hover effect by animating the overlay background and the h2, paragraph, and link with translate and rotate transforms and timed transitions for a polished, staggered reveal.

Implement a hover image effect where the image scales down to zero as a green background expands and rotates, while text fades in with transition delays.

Explore a hover image effect that reveals a green background, scales the heading and paragraph, and slides the link from bottom to its position using transitions and delays.

Create an image hover that rotates and scales the image, fades it, reveals a green background, and staggers the link, paragraph, and the heading via transition delays.

Create a dynamic split image on hover by dividing a centered image with before and after pseudo elements that rotate in opposite directions, revealing a clean heading and paragraph.

Explore creative menu effects by applying css transforms and transitions to build interactive examples from the course on creative advanced css and javascript animations.

Create a centered menu with a two-line hover border using before and after pseudo elements that scale from left and right on hover, styled with flexbox and clean links.

Create an interactive hover effect for a horizontal navigation menu by animating borders on the top-right and bottom-left corners using the before and after pseudo-elements, and smooth transitions.

Learn to create a creative split background menu with four spans, animating on hover with scaleY and staggered transition delays to reveal the text.

Create a menu hover effect with two animated underlines using the before and after pseudo elements. Build a horizontal nav with anchors and animate blue and pink lines on hover.

Create an interactive menu hover effect by enlarging the hovered link, applying an orange background with a before pseudo element, and blurring other links using CSS filters and transitions.

Use transition delay to craft a creative menu hover effect, coordinating top and bottom span movements with a left-to-right green reveal.

Create a hover menu effect with a dark background that scales on hover, complemented by top and bottom borders, implemented with the before and after pseudo elements on anchor links.

Create a dynamic menu hover with four yellow borders around each link using spans and before/after pseudo elements, revealing borders on hover in a flex horizontal menu.

Create a menu hover effect by rotating and shrinking top and left borders with before pseudo element, then apply same technique to right and bottom borders with after pseudo element.

Create a multi-layered menu hover using transparent links with white, red, and light blue layers, built with before and after pseudo elements and smooth transforms.

Create a vertical menu with a hover effect where non-hovered links fade and the hovered text emerges from the sides behind a background word using a before pseudo element.

Create a vertical menu where the left border slides to the right on hover, with a before pseudo-element and data text revealing a color-filled link outline.

Create a text fading menu hover effect: hover a link to fade its color to semi-transparent and reveal a glowing green overlay text using before pseudo-element with the data-text attribute.

design creative css card effects using css transforms and transitions, applying hands-on examples from this section.

Create a card hover effect where a pink bottom line, implemented via a before pseudo element, slides up to cover the card and turn the content text white on hover.

Explore the creative expandable card hover effect that expands the card, moves the image to the top, and reveals text from the top on hover using transform and opacity.

Learn to build a Captain Marvel themed card hover effect that enlarges the image, shifts it right, and reveals left-aligned heading, paragraph, and link with smooth transitions.

Create a two-face card with a hover animation that shrinks a blue background into a circle with a blue border, revealing the heading, text, and read more link.

Design and implement a double-face card hover effect that reveals pink on hover, shifts faces up and down, reveals text content, and enhances contrast with shadow and transitions.

Explore a creative layered card hover experiment that uses two white layers rotated on hover to reveal a bottom area with details and an image box inside.

Design a creative scaling card hover effect by expanding a white content panel over the card to reveal the post title and text, while the image fades away on hover.

Create a product card with a skewed light blue overlay that changes on hover, headphones picture scales down, and the buy now link moves from bottom to top.

Create an interactive CSS product card that uses a hover-triggered green circle, a moving shoe image, and staggered content reveal to showcase sizes, colors, and a buy now link.

Create interactive css card hover effects with two cards, where images grow and shift while content slides in from the right, using html structure and css transitions.

Explore creative examples built with CSS transitions and transforms, as we apply what we've learned to design and animate interactive visuals.

Create a smoky fading text effect with css transforms by wrapping each letter in a list item, then on hover translate, rotate, blur, and stagger opacity with delays.

Create a text fill effect on hover by layering a darker before pseudo-element over light headline text, with a 0.5 second width transition.

Create an interactive social media icon row with a hover effect that grows the icon and reveals a moving green background using Font Awesome icons and css animations.

Explore a creative rotated text border effect using CSS transforms and pseudo elements. Build a hover animation that reveals top, bottom, left, and right borders with delayed, sequential transitions.

Create a hover text transition that changes close to open by rotating letters with css transforms and delays, using the Just Another Hand font from Google fonts.

Learn to create a blur and focus text hover effect with a centered heading and blurred background image; hover the heading to enlarge it and sharpen the background.

Learn to create a text focus and blur effect on hover, revealing four letter borders using the i element with before and after pseudo-elements and box-shadow.

Create a three-card hover effect inside a circular yellow backdrop using CSS transforms and transitions. Stack, rotate, skew, and scale the cards with opacity and shadows for a 3D look.

Learn to build a css text clip mask parallax scrolling effect by applying background images to headings, clipping them with background-clip:text, and fixing the background during scroll.

Define a CSSA animation with keyframes and apply it to a div using animation-name and animation-duration, moving from translate x 0 to translate x 1000 pixels in three seconds.

Learn how to create css animations with more than two stages using the percentage method, map transitions from 0% to 50% to 100%, and apply translate transforms.

Discover how the animation fill mode property controls where an element ends after a CSS animation and whether it stays or returns, using forwards, backwards, none, or both.

Learn how the animation iteration count property controls repetition, including numeric values and the infinite keyword, and how duration and timing functions like linear, ease, and ease-in-out shape motion.

Explore the animation direction property and its four values—normal, reverse, alternate, and alternate reverse—and how they determine the start, end, and infinite looping of CSS animations.

Combine all css animation properties into the animation shorthand to set the name, duration, and delay, while noting that property order doesn't matter.

Explore CSS animations by building more than 40 unique effects and projects. Apply everything you've learned to create visually engaging, creative examples in this section.

Create a right-to-left floating text effect with an infinite css animation. Style h1 with Arial, 90px font size, 90px line height, and alternating rotate between 5 and -5 degrees.

Create a rotating loading effect with css animation using keyframes and 3d transforms to rotate a div on the y axis and then the x axis.

Create an infinite driving animation by moving the road background from bottom left to bottom right while rendering a car and motorbike with absolute positioning.

Learn to build a text rotator with CSS animations and keyframes, using a span with the before pseudo element to switch words like transitions, animations, and transforms every five seconds.

Build an animated background pattern by animating background-position from 0 0 to 0 600px, creating vertical, horizontal, and combined movement with a 15s linear infinite cycle.

Learn to build a shaking hover effect for a button with CSS animation. The lesson shows keyframes rotating right and left by 10 degrees and hover color and border changes.

Create an animated button with a red ::before background that slides left to right and skews. On hover, it expands to full width with no skew and stops the animation.

Create an infinite lighting text effect with css animations by changing color and text shadow on letters in a flex list, using staggered delays to light them sequentially.

Build a CSS heart using a div with before and after pseudo elements. Then animate a heartbeat by scaling from 1 to 1.4 and back, looping infinitely.

Create an animated text background by applying a background image to a heading and clipping it with background-clip. Animate the background-position over 20 seconds for a seamless infinite effect.

Build a five-circle bouncing loader with CSS animations, using a jumping keyframe to move each circle up to 150px and back, with randomized delays for a natural feel.

Learn to create a rain effect using css animations by styling a rain div, applying a background image to the body, and animating background-position with a 0.3s linear infinite loop.

Build a hover effect on font awesome icons that fades in a dark blue circular background and an animated rotating dashed border, with icons centered using flexbox.

Create a dynamic loading text animation by styling the word 'loading' with color changes, horizontal movement, and evolving letter spacing and opacity using CSS animations and per-letter delays.

Create a wavy button hover using a CSS wave div and a before pseudo-element animated with a wavy sequence, then reveal the light blue background and white text on hover.

Create a green circular icon with a pulsing border using CSS animations. Use before and after pseudo elements and transform scale to craft a two-border pulse.

Create a simple image slider using CSS animations by changing the slider div's background image at keyframe percentages to cycle through multiple images over time.

Create an endlessly changing background color with CSS animations. Define color steps at 0%, 20%, 40%, 60%, 80%, 100% using keyframes, apply to body, and set a 10-second infinite animation.

Build a Newton's cradle effect with CSS animations, using flexbox, spans as cradle arms, before pseudo elements for balls, and synchronized left and right arm animations with delays.

Create a dynamic preloader using css animations: four rotated squares inside a container that expands and contracts while rotating as a unit, delivering a smooth loading effect.

Create a three-square loading animation with css animations, using absolute positioning and staggered delays to form a looping chasing square path.

Create a text reveal effect with a before pseudo-element and css animations on an h1 loading label, animating width from 0 to 100% with overflow hidden and a yellow border-right.

Learn to build a rotating ring loader around the word loading using CSS animations. Create a 200 px container with a circular ring, left border animation, and centered text.

Create a CSS line loading animation by scaling from left to right, then right to left using transform-origin. Enable infinite alternating timing to reverse after each cycle.

Create a loading animation with eight divs in a flex container, styled as 6px by 40px bars, then animate staggered scale with delays and an optional transform-origin tweak.

Create a css loading animation with rotating border rings: outer red, middle green rotating opposite the inner yellow ring, plus a white center dot, all built with borders.

Create a nine-square loading animation with CSS by fading each square using delays and column layout, leveraging before pseudo elements, animation timing, and responsive wrapping.

Learn to create a six-part loading animation with CSS, using flex layouts, scale transforms, and staggered delays to produce a colorful, continuous loader.

Create an animated background with ten moving boxes using CSS animations. Each square starts below the screen, rises while rotating and fading to create a dynamic, staggered visual effect.

Create a sliding hexagon loader by animating a line and a hexagon with CSS, using before/after pseudo elements, transforms, and synchronized rotations.

Build a thin red hover line for menu items with a before pseudo element, an animation that moves from left to right and covers the link, turning the text white.

Create a six-box background animation with CSS where blue and red boxes grow and rotate, appearing in a staggered sequence due to differing animation delays.

Create a colorful liquid glass animation with two glasses, where the liquid rises and falls inside each glass using CSS and HTML, including pseudo elements and an infinite loop.

Create a fancy border loading animation by shaping three elastic circles with border radius and rotating them in css, with one reversed and the third faster.

Learn to build a rotating glowing loader with a gradient circle using CSS, including gradient generation, before/after pseudo elements, box-shadow glow, and a 2-second infinite rotation.

Create a hover button effect with four animated border lines around a link, a dark gray fill on hover, and a pencil icon drawn via Font Awesome.

Create a multi-layered circles animation using CSS and HTML, featuring a rotating blue semicircle, a moving white circle, and a large pink circle, all animated with CSS keyframes and transforms.

Create a glowing loader with 20 rotating spans using CSS variables and box-shadow, forming a radiant display of bulb-like circles with adjustable animation delays.

Create a cloud rain animation using HTML divs and CSS, building a cloud with layered shapes and raindrop spans, then randomize drop timings with CSS variables and calc.

Master a text fading effect using css animation and a before pseudo-element to reveal and conceal text with an overlay that moves left to right in an infinite loop.

Create a neon text reveal animation by moving a light bar across glowing text, revealing then hiding it in an infinite loop using HTML and CSS.

Learn to create a CSS dots loader with eight circles where four remain fixed and four rotate around them, using CSS variables, spans, before pseudo elements, and a circle animation.

Create a neon border button with a reflection using four spans as border lines, hover glow, and a box-reflect effect in css.

Create a glass morphism animation featuring a semi-transparent center circle and moving red square and white circle, which blur behind the circle and layer with z-index for synchronized timing.

Create a dynamic moon rotating animation using a central orbit with letters M, O, and N; flexbox positions the letters while a keyframed orbit spins the moon around the center.

Create a scanning fingerprint animation with a moving glow line, overlay, and flickering scanning text using a simple HTML structure and CSS keyframes for a futuristic, interactive web design.