This tutorial will teach you 5 visually engaging transitions and animation effects that you can use today. Fork the pens, practice the concepts, take your CSS to the next level!
Let’s start with some CSS transitions; a smooth way to change property values over a specified duration. These transitions occur when a property or element value changes, such as when a button gradually changes color, or when an image is enlarged when it is hovered over. Transition effects can be controlled using the
transition property, specifying the property to be transitioned, the duration, timing function, and delay.
CSS Hover Sliding Transition
Our first example demonstrates the use of CSS transitions to create a lovely image card reveal effect. CSS transitions are applied to a
.img-card class, giving us a smooth transition effect when hovering over each image.
Here’s a quick breakdown:
- The HTML structure defines the gallery of images enclosed within a
<section>element. Each of the images is also enclosed in a
<section>tag. The styling sets each of the image card’s initial position to the left (
left: 0px;) and defines its other properties.
transitionproperty with the values (
0.3s), specifies the smooth transition effect when the card is hovered over at the specified transition delay.
- There is also a
hoverpseudo-class on the image card that defines the image card’s appearance when hovered over. It expands the card (
flex: 2;), and adds a pointer cursor for a visually appealing effect.
This is a lovely example to get your feet wet with CSS transitions. As we advance more in this tutorial, we’ll go into more complex demos than this.
Reveal Image on Scroll
It demonstrates how to create a striking effect by revealing images and content as the user scrolls down the page. Images with a clip-path effect and background overlay are gradually revealed with the use of a CSS transition.
IntersectionObserver is utilized to trigger the animation when elements enter the viewport.
So how did George do this?
In the HTML structure, the
.reveal-sectionstyles the reveal section, defining its maximum width, margin, and padding.
.reveal-section .scrollstyles the grid layout for the content inside the reveal section, creating a two-column layout with a column gap.
.reveal-section figurestyles the container for the image, adding a box shadow and a background transition effect.
.reveal-section figure::before: The “before” pseudo-class adds a background overlay that transitions with a clip-path effect when revealed.
.reveal-section figure imgstyles the image in the figure element and sets a clip path for the reveal effect.
- It selects the element with the class
.scroll, and the figure element, which is the image container.
- The Intersection Observer callback function adds the class
.is-animatedto elements that are at least 50% visible in the viewport and removes the class when they are not. This is what controls the dark background to slide in, reveal the image and slide out.
So if you scroll up and down that page, the image is revealed gradually.
Moving on from transitions, CSS animations offer even more control over element transformations. With animations, you can create keyframes that define and interpolate between different states of an element over a given duration. This allows for more complex and dynamic visual effects compared to transitions.
Card Stacking and Unstacking Animation
Some CSS custom properties will be used to calculate animation properties dynamically for flexibility and easy customization. The
animation-timeline property is used to control the animation based on scroll events.
Try scrolling up and down this demo in fullscreen mode to see the stacking and unstacking effect on each card.
Here’s how this functionality was achieved:
- The CSS variables (defined in
:root) are used to set the card heights, margins, and other properties.
- Basic styles are applied to the body and header of the page to create the layout. The cards are also styled to give them a card-like appearance.
- Now to create the stacking and unstacking functionality, I checked for browser support using
- The animation is controlled by CSS custom properties (
--reverse-index0, etc.) and they are calculated based on the card’s position in the list.
- The animation scales each card element when scrolled, creating a “stacking” and “unstacking” effect. The
@keyframesrule defines how the scale transformation changes as the animation progresses. This
@keyframeskeyword is a very important concept when creating animations using CSS.
- The animation duration and delay are adjusted based on the card’s position, creating a dispersed effect.
requestAnimationFrame method. Click on any part of the canvas to display the floating bubbles.
How did Shruti create this bubble animation effect?
- The HTML structure includes a paragraph (
<p>) instructing the user to click on the canvas; a
<canvas>element with the id “canvas” where the animation will be rendered.
- The canvas element is styled to set its background color to match the dark colour we’ve used throughout this tutorial (but you can change it to whatever you like) and ensure it scales responsively to the window width.
draw()method of the “Bubble” class is responsible for rendering each bubble on the canvas. It uses the canvas’s 2D rendering context to draw circles with gradients to create bubble-like circles.
move()method updates the position of each bubble, causing it to rise upwards.
- A click event listener (
canvas.addEventListener("click", handleDrawCircle)) triggers the creation of new bubbles whenever any area on the canvas is clicked.
animate()function clears the canvas and updates the position of each bubble, creating the animation effect. It uses the
requestAnimationFramemethod to optimize performance.
This bubbles effect animation can be a fun addition to a webpages. You can also create animations like this but with different floating graphics like balloons, snow, and so on.
We’re going to be looking at one last example - a parallax scrolling webpage.
Parallax Scrolling Webpage
So what exactly is parallax scrolling?
Parallax scrolling is a motion design technique where backgrounds move slower than whatever is in the foreground. It gives a sense of depth, and we can use this on websites when a user scrolls down a webpage. This illusion of depth and adds a visually appealing, interactive element to the website. Parallax scrolling can be used to engage users, enhance storytelling, and create a more immersive browsing experience.
Though this might not be a complex example of CSS animation, it falls under the web design concept of creating stunning visual effects on a web page.
The typical implementation of parallax scrolling is as follows:
- First, the webpage is divided into different layers, each layer containing different elements. The layers usually include images.
- The scrolling effect is created as the user scrolls up and down the webpage and the background layers move at different speeds compared to the foreground layers.
- The slower-moving background layers give the illusion of depth as if the user is looking at objects through different perspectives.
Fork the pen to play with your own settings and parallax content!
We’ve explored how CSS transitions and animations give elements on web pages life and depth. Thanks to all the talented developers whose work we forked! We’ve seen how these concepts can transform static pages into dynamic pages with unique experiences.