Search

Nalezeno "css animation": 30

Of Course We Can Make a CSS-Only Clock That Tells the Current Time!


Let’s build a fully functioning and settable “analog” clock with CSS custom properties and the calc() function. Then we’ll convert it into a “digital” clock as well. All this with no JavaScript! Here’s a quick look at the clocks … The post Of Course We Can Make a CSS-Only Clock That Tells...

Advanced CSS Animation Using cubic-bezier()


When dealing with complex CSS animations, there is a tendency to create expansive @keyframes with lots of declarations. There are a couple of tricks though that I want to talk about that might help make things easier, while staying in … The post Advanced CSS Animation Using cubic-bezier()...

Image Fragmentation Effect With CSS Masks and Custom Properties


Geoff shared this idea of a checkerboard where the tiles disappear one-by-one to reveal an image. In it, an element has a background image, then a CSS Grid layout holds the “tiles” that go from a filled background color to … The post Image Fragmentation Effect With CSS Masks and Custom...

Exploring @property and its Animating Powers


Uh, what’s @property? It’s a new CSS feature! It gives you superpowers. No joke, there is stuff that @property can do that unlocks things in CSS we’ve never been able to do before. While everything about @property is exciting, … The post Exploring @property and its Animating Powers appeared...

Animating a CSS Gradient Border


This little trick for gradient borders is super useful: .border-gradient { border: 5px solid; border-image-slice: 1; border-image-source: linear-gradient(to left, #743ad5, #d53a9d); } Here’s some basic demos from our article on the subject. Sephanie Eckles was sharing around the idea...

Re-Creating the Porky Pig Animation from Looney Tunes in CSS


You know, Porky Pig coming out of those red rings announcing the end of a Looney Tunes cartoon. We’ll get there, but first we need to cover some CSS concepts. Everything in CSS is a box, or rectangle. Rectangles … The post Re-Creating the Porky Pig Animation from Looney Tunes in CSS appeared...

Checkerboard Reveal


Back when I was 10, I remember my cousin visiting our house. He was (and still is) a cool kid, the kind who’d bring his own self-programmed chess game on a floppy disk. And his version of chess was … The post Checkerboard Reveal appeared first on CSS-Tricks. You can support CSS-Tricks...

AnimXYZ


There are quite a few CSS animation libraries. They tend to be a pile of class names that you can apply as needed like “bounce” or “slide-right” and it’ll… do those things. They tend to be pretty opinionated with … The post AnimXYZ appeared first...

Lessons Learned from Sixty Days of Re-Animating Zombies with Hand-Coded CSS


I’ll be linking to individual Pens as I discuss the lessons I learned, but if you’d like to get a sense of the entire project, check out 60 days of Animation on Undead Institute. I started this project to end on August 1st, 2020, coinciding with the publication of a book I wrote featuring...

Ground Rules for Web Animations


Animations can make a site stand out. Or, they can just as easily kill the experience. When working with web animations, there are a few things that could go wrong like adding animations that serve no purpose, setting durations that are  too long or too quick, or not using right type...

Timer Bars in CSS with Custom Properties


I was working on a thing the other day that needed a visible timer. There was UI precedent for this type of timer on the project. People didn’t want to see numbers ticking downward; it was more ideal to see a “bar” drain away from full to empty. I mention that because there...

How to Re-Create a Nifty Netflix Animation in CSS


The design for Netflix’s browse page has remained pretty similar for a few years now. One mainstay component is the preview slider that allows users to scroll through content and hover on items to see a preview. One unique characteristic of the UI is its hover behavior. When a show preview...

Animated Matryoshka Dolls in CSS


Here’s a fun one. How might we create a set of those cool Matryoshka dolls where they nest inside one another... but in CSS? I toyed with this idea in my head for a little while. Then, I saw a tweet from CSS-Tricks and the article image had the dolls. I took that as a sign! It was time to...

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 things about the implementation I felt I could simplify and improve at the same time. First off,...

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 clip-path property. See the Pen Animated Pac-Man by Maks Akymenko (@maximakymenko) ...

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 or animate the dot of the letter independently from the stalk. Worried about...

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 runtime is the territory of JavaScript, not so much CSS. Or is it? If we factor in...

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. That's what you get when saving a post draft and clicking the "Preview" button in the editor. How'd they...

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 so nice to drop yet one more dependency and go with vanilla CSS. Well, I found a way to account for variations within...

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 and — when the element reached the maximum or minimum value —...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace