Skip to main content
CSS-Tricks
Search

Articles Tagged
@property

9 Articles
{
,

}
Direct link to the article Interpolating Numeric CSS Variables
@property animation custom properties

Interpolating Numeric CSS Variables

We can make variables in CSS pretty easily:

:root {
  --scale: 1;
}

And we can declare them on any element:…

Avatar of Geoff Graham
Geoff Graham on Aug 30, 2022 (Updated on Sep 1, 2022)
Direct link to the article Diagonal Stripes Wipe Animation
@property css animation keyframes repeating gradient

Diagonal Stripes Wipe Animation

I was playing this game on Apple Arcade the other day called wurdweb. It’s a fun little game! Little touches like the little shape dudes that walk around the screen (but otherwise don’t do anything) give it a lot …

Avatar of Chris Coyier
Chris Coyier on Nov 30, 2021
Direct link to the article Build Complex CSS Transitions using Custom Properties and cubic-bezier()
@property animation cubic-bezier transition

Build Complex CSS Transitions using Custom Properties and cubic-bezier()

I recently illustrated how we can achieve complex CSS animations using cubic-bezier() and how to do the same when it comes to CSS transitions. I was able to create complex hover effect without resorting to keyframes. In this article, I …

Avatar of Temani Afif
Temani Afif on Jul 14, 2021
Direct link to the article Image Fragmentation Effect With CSS Masks and Custom Properties
@property css animation custom properties mask

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 …

Avatar of Temani Afif
Temani Afif on Mar 23, 2021
Direct link to the article Exploring @property and its Animating Powers
@property css animation custom properties

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, …

Avatar of Jhey Tompkins
Jhey Tompkins on Mar 4, 2021
Direct link to the article Animating a CSS Gradient Border
@property border css animation gradients

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 …

Avatar of Chris Coyier
Chris Coyier on Feb 8, 2021
Direct link to the article Animating Number Counters
@property calc content counters keyframes

Animating Number Counters

Number animation, as in, imagine a number changing from 1 to 2, then 2 to 3, then 3 to 4, etc. over a specified time. Like a counter, except controlled by the same kind of animation that we use for …

Avatar of Carter Li
Carter Li on Oct 9, 2020
Direct link to the article Using @property for CSS Custom Properties
@property custom properties

Using @property for CSS Custom Properties

Una Kravetz digs into how Chrome now allows you to declare CSS custom properties directly from CSS with more information than just a string. …

Avatar of Chris Coyier
Chris Coyier on Sep 2, 2020
Direct link to the article @property
@property custom properties

@property

The @property is totally new to me, but I see it’s headed to Chrome, so I suppose it’s good to know about!

There is a draft spec and an “intent to ship” document. The code from that document …

Avatar of Chris Coyier
Chris Coyier on Apr 25, 2020 (Updated on Nov 12, 2021)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
CSS-Tricks
Social
Back to Top