Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
css animation

40 Articles
{
,

}
Direct link to the article Weaving a Line Through Text in CSS
CSS css animation transform

Weaving a Line Through Text in CSS

Earlier this year, I came across this demo by Florin Pop, which makes a line go either over or under the letters of a single line heading. I thought this was a cool idea, but there were a few little …

Avatar of Ana Tudor
Ana Tudor on Feb 26, 2020
Direct link to the article Pac-Man… in CSS!
clip-path css animation css shapes

Pac-Man… in CSS!

You all know famous Pac-Man video game, right? The game is fun and building an animated Pac-Man character in HTML and CSS is just as fun! I’ll show you how to create one while leveraging the powers of the …

Avatar of Maks Akymenko
Maks Akymenko on Nov 11, 2019
Direct link to the article The Trick to Animating the Dot on the Letter “i”
css animation glyphs unicode

The Trick to Animating the Dot on the Letter “i”

Here’s the trick: by combining the Turkish letter “ı” and the period “.” we can create something that looks like the letter “i,” but is made from two separate elements. This opens us up to some fun options to style …

Avatar of Ali Churcher
Ali Churcher on Nov 4, 2019
Direct link to the article Are There Random Numbers in CSS?
css animation random numbers

Are There Random Numbers in CSS?

CSS allows you to create dynamic layouts and interfaces on the web, but as a language, it is static: once a value is set, it cannot be changed. The idea of randomness is off the table. Generating random numbers at …

Avatar of Alvaro Montoro
Alvaro Montoro on Oct 29, 2019
Direct link to the article Digging Into the Preview Loading Animation in WordPress
css animation loader SVG animation WordPress

Digging Into the Preview Loading Animation in WordPress

WordPress shipped the Block Editor (aka Gutenberg) back in version 5.0 and with it came a snazzy new post preview screen that shows the WordPress logo drawing itself while the preview loads.…

Avatar of Geoff Graham
Geoff Graham on Oct 22, 2019
Direct link to the article Using Custom Properties to Wrangle Variations in Keyframe Animations
css animation custom properties

Using Custom Properties to Wrangle Variations in Keyframe Animations

Have you ever wondered how to customize CSS animations keyframes without using any preprocessor feature, like mixins? I keep reaching for preprocessors for this reason, but it would be so nice to drop yet one more dependency and go …

Avatar of Sandrina Pereira
Sandrina Pereira on Sep 12, 2019
Direct link to the article Bounce Element Around Viewport in CSS
animation css animation viewport units

Bounce Element Around Viewport in CSS

Let’s say you were gonna bounce an element all around a screen, sorta like an old school screensaver or Pong or something.

You’d probably be tracking the X location of the element, increasing or decreasing it in a time loop …

Avatar of Chris Coyier
Chris Coyier on Aug 19, 2019
Direct link to the article Different Approaches for Creating a Staggered Animation
css animation custom properties

Different Approaches for Creating a Staggered Animation

Animating elements, at its most basic, is fairly straightforward. Define the keyframes. Name the animation. Call it on an element.

But sometimes we need something a little more complex to get the right “feel” for the way things move. For …

Avatar of Daniel Benmore
Daniel Benmore on Jun 27, 2019
Direct link to the article A Course About CSS Layout and Animations
css animation education learning

A Course About CSS Layout and Animations

Direct Link

Christina Gorton just released a new course called CSS Layout and Animations as a part of Design+Code, which is a $9/month. That includes a ton of video training on everything from stuff like this to React to Sketch to …

Avatar of Chris Coyier
Shared by Chris Coyier on Jun 5, 2019
Direct link to the article Movin’ Modals Along a Path
css animation modal offset-path

Movin’ Modals Along a Path

Modals always be just appearin’. You might see one once in a while that slides in from one of the edges, or uses some kind of scale/opacity thing to appear from “above” or “below.” But we can get weirder …

Avatar of Chris Coyier
Chris Coyier on Jun 4, 2019
Direct link to the article Integrating Third-Party Animation Libraries to a Project
animation css animation third-party vue animations

Integrating Third-Party Animation Libraries to a Project

Creating CSS-based animations and transitions can be a challenge. They can be complex and time-consuming. Need to move forward with a project with little time to tweak the perfect transition? Consider a third-party CSS animation library with ready-to-go animations waiting …

Avatar of Travis Almand
Travis Almand on May 14, 2019
  • Newer
  • 1
  • ...
  • 2
  • 3
  • 4
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Mastodon
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top