5 Awesome CodePen Demos: CSS Transitions and Animations

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!

CSS Transitions

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.
• The transition property with the values (ease-in-out and 0.3s), specifies the smooth transition effect when the card is hovered over at the specified transition delay.
• There is also a hover pseudo-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

Alright, next example, and this time we’ll add some JavaScript into the mix! The demo below 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.

The JavaScript IntersectionObserver is utilized to trigger the animation when elements enter the viewport.

In the HTML structure, the reveal-section element holds the content to be revealed on scroll and this section is styled using CSS. The image reveal on scroll functionality was accomplished using JavaScript. Here’s how: 

• .reveal-section styles the reveal section, defining its maximum width, margin, and padding.

• .reveal-section .scroll styles the grid layout for the content inside the reveal section, creating a two-column layout with a column gap.

• .reveal-section figure styles 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 img styles the image in the figure element and sets a clip path for the reveal effect.

• The JavaScript code snippet sets up an Intersection Observer to trigger the reveal animation when elements come into view as the user scrolls down the page.

• It selects the element with the class .reveal-section, .scroll, and the figure element, which is the image container.
• The Intersection Observer callback function adds the class .is-animated to 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. 

CSS Animations

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

Let’s begin with an example of how CSS animations can be used to create a stacking and unstacking cards effect when users scroll up and down a web page. 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 @supports.
• The animation is controlled by CSS custom properties (--index, --reverse-index, --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 @keyframes rule defines how the scale transformation changes as the animation progresses. This @keyframes keyword 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.

Animated Bubbles 

Now time for a slightly different demo! This code demonstrates how to create a floating bubbles animation effect using HTML canvas, and the JavaScript requestAnimationFrame method. Click on any part of the blue canvas to display the floating bubbles.

How is this bubble animation effect created?

• 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.
• The JavaScript code initializes the bubbles animation. A class “Bubble” is defined to represent each bubble. Each with properties such as position, radius, color, and velocity.
• The 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.
• The 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.
• The animate() function clears the canvas and updates the position of each bubble, creating the animation effect. It uses the requestAnimationFrame method 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.

View the demo below in fullscreen mode to get the parallax scrolling 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!

Conclusion

We’ve explored how CSS transitions and animations give elements on web pages life and depth. We’ve seen how these concepts can transform static pages into dynamic pages with unique experiences.

I hope you liked these demos. Level up your animation game using CSS and JavaScript, and remember to keep it at a minimum when building full web applications. Happy Coding!