100+ CSS Animations

Welcome to our collection of CSS animations! In this curated collection, we have gathered a variety of free HTML and CSS animation code examples from reputable sources such as CodePen, GitHub, and other valuable resources.

With our February 2024 update, we are excited to present 14 new items that showcase the latest trends and techniques in web design.

Whether you are a web developer seeking inspiration or a designer looking for ready-to-use animation snippets, this collection has something for everyone. Explore the power of CSS animations and enhance your website with captivating visual effects.

Let’s dive in and discover the possibilities together!

CSS Animation Libraries

Single Keyframe Tricks

Each button is associated with a unique animation effect, such as “shake”, “pulse”, “glitch”, “flip”, “fill”, “sheen”, “glow”, “blur”, and “tonyhawk”. These effects are achieved using CSS animations and keyframes, which define the sequence of changes in the animation. Interactive buttons significantly enhance user engagement, offering not just navigational utility but also enriching the visual appeal of webpages. Dependencies: props.easing.css.

Pure CSS Infinite Scroll Animation

The animation allows for infinite scrolling in both directions, providing a seamless user experience. The duration of the scrolling animation can be customized using the –duration CSS variable. Dependencies: none.

Bullypop

The code uses CSS animations for smooth element movements. Keyframes define styles at different animation stages. The position and transform properties set element positions and apply 3D transformations. The mix-blend-mode controls color blending, adding complexity. Pseudo-elements ::before and ::after create additional elements. Gradient backgrounds create smooth color transitions. Radial and linear gradients contribute to the aesthetic. The skew property tilts elements, adding dynamism. Relative units like vmin ensure adaptive sizing. Responsive. Dependencies: none.

Washing Machine Animation in Pure CSS

The HTML code provides the basic structure for the washing machine, including the machine itself, its buttons, and the clothes inside it. Each element is given a specific class name, which is then targeted in the CSS for styling. The use of border-radius property transforms square div blocks into circular shapes to mimic parts like the door and control knobs of the machine. Gradients and shadows are applied for a realistic touch. Keyframes are defined to create a spinning effect for the clothes inside the machine, mimicking an actual wash cycle. The code uses responsive design techniques to ensure that the washing machine animation looks good on screens of all sizes. Responsive. Dependencies: none.

Optimus Prime Toggle with CSS Transform

One notable feature is the extensive use of CSS custom properties, denoted by var(–variable-name). Custom properties allow developers to define reusable values, enhancing maintainability and flexibility in styling. The code utilizes 3D transformations to give a sense of depth and perspective to the Optimus Prime character. The translate3d function is particularly used to adjust elements along the X, Y, and Z axes. The clip-path property is employed to create non-rectangular shapes. The :root:has() pseudo-class is used conditionally to apply styles based on the presence of the #transform:checked selector. This implies that the styling is influenced by the state of a checkbox with the id transform. Responsive. Dependencies: none.

Become the Cup

The provided code snippet is a fascinating example of how HTML and CSS can be used to create dynamic and visually appealing web content. The HTML part of the code primarily consists of div elements, which are used to create a visual scene. These div elements are nested and classed to represent different components of the scene, such as a pond, fish, ripples, and a quote. The CSS part of the code is used to style these HTML elements. The animation property is used extensively throughout the code to create dynamic effects, such as the movement of the fish and the ripples in the pond. The @keyframes rule is used to specify the behavior of these animations. The code also makes use of CSS filters to create interesting visual effects. For example, the blur filter is used to create a blur effect on the pond’s surface, and the drop-shadow filter is used to create a shadow effect for the quote. The code includes SVG elements with filters. These are used to create more complex visual effects, such as turbulence and displacement in the pond’s water. Responsive. Dependencies: none.

A Dynamic Star Pattern with HTML and CSS

The HTML structure of the code is composed of a series of nested div elements, organized into sets within a scene. Each set contains 12 div elements, and there are multiple sets within the scene. The scene itself is divided into two parts: a 2D part and a 3D part, each containing multiple sets of div elements. The CSS code defines the styles and animations for these div elements. Each div is styled to be circular with a white background and a box shadow that changes color based on the –step variable. The wave animation for the 2D scene changes the vertical position of the divs, creating a wave-like effect. The sway animation for the 3D scene changes the depth position of the divs, creating a swaying effect. Responsive. Dependencies: none.

An Interactive Beer Glass

The HTML structure consists of a div element with the class glass, which contains SVG paths that define the shape of the glass. Inside the glass div, there are other divs for the wrapper, contents, beer, bubbles, and head of the beer. These elements are used to create the visual representation of the beer glass and its contents. The beer glass is interactive. When you click and hold on the glass (or tap and hold on touch devices), the animations play, giving the effect of the glass filling up with beer. This is achieved using the :active and :hover pseudo-classes to change the animation-play-state property from paused to running. Responsive. Dependencies: none.

Gradient Animation with CSS’s @property

The HTML structure is quite simple. It consists of a parent div with the class container, which contains three child div elements, each with the class circle. The CSS code is more complex and uses several advanced features. The :root rule defines four color variables (–c1 to –c4). These are used later in the conic-gradient function. The @property rule is part of the CSS Houdini Paint API. It defines a custom property –progress that can be animated. The @keyframes rule defines an animation named progress that animates the –progress property from 0 to 100%. This animation is applied to the .circle elements with an infinite loop. Responsive. Dependencies: none.

CSS Animation Effects

The body contains a div with the class container, which in turn contains two more div elements with the class box. These box elements have inline CSS styles that use CSS variables (–i:1 and –i:2). The body is set to be a flex container, centered both vertically and horizontally, with a black background. The .container class also uses flexbox for centering, and applies a reflection effect using -webkit-box-reflect. The .box class applies a linear gradient background, a rotation transform, and an animation. The animation moves the background position from 0 to 40px, creating a moving gradient effect. Responsive. Dependencies: none.

Flux Capacitor (1.21 GIGAWATTS!): A CSS Animation

The HTML structure consists of a main container with the class case. Inside the case, there are three main sections: top, center, and bottom. Each section contains various elements such as labels, lights, circles, bolts, bridges, and plugs, creating a visually appealing representation of a device. The animation is achieved using SVG elements with wave-like patterns and various CSS properties for positioning and styling. Responsive. Dependencies: none.

Pulsating Heart: A CSS Animation

The HTML structure is straightforward. It consists of a parent div with the class heart, which contains two child div elements, heartbeat and heartecho. Both children display the heart emoji (❤️), creating the illusion of a heart and its echo. The heart elements are animated using keyframes, which define the animation’s behavior at various stages. The heartbeat animation alters the scale of the heart, making it appear to beat. The heartecho animation creates an echo effect by scaling the heart from its original size to three times larger while gradually reducing its opacity. Dependencies: none.

Mesmerizing Tube Animation with CSS

The HTML structure is simple, consisting of nested div elements representing tubes, each containing a series of strips. The structure is minimalistic, emphasizing the power of CSS in this animation. The tubes exhibit a fascinating 3D rotation effect using the rotateY property within the @keyframes rule. Each tube is individually animated with a delay, creating a cascading and immersive visual experience. The strips within each tube are dynamically positioned and rotated to achieve the illusion of a continuously moving background. The rotateY and translateZ properties are used in conjunction to create this mesmerizing effect. The @keyframes rule defines the speen animation, which rotates the tubes along the Y-axis, creating a spinning effect. The animation is set to be infinite and linear, ensuring a seamless and continuous rotation. Responsive. Dependencies: none.

poziomQ

The HTML code creates a structure for a character with various parts such as leaves, arms, body, face, eyes, freckles, mouth, legs, and Each part is represented by an HTML element, and these elements are organized in a hierarchical structure that reflects the physical structure of the character. The CSS code defines the visual appearance and animations for the character. It includes styles for different parts of the character, such as colors, sizes, and shapes. The CSS also includes keyframes for animations that are triggered when a user hovers over the character. These animations cause the character to move in various ways, creating a sense of interactivity and dynamism. Dependencies: none.