CSS animate custom properties/variables

by

This can be achieved by defining variables using (as of writing this, not well-supported) @property, which allows declaring types and that allows the browser to “understand”, for example, that a certain property (variable) is a Number and then it can gradually animate/transition that variable.

Example Code:

@property --opacity {
  syntax: '<number>'; /* <- defined as type number for the transition to work */
  initial-value: 0;
  inherits: false;
}

@keyframes fadeIn {
  50% {--opacity: 1}
}

html {
  animation: 2s fadeIn infinite;
  background: rgba(0 0 0 / var(--opacity));
}

The current types that are allowed include:

length, number, percentage, length-percentage, color, image, url, integer, angle, time, resolution, transform-list, transform-function, custom-ident (an identifier string)

Helpful articles:

  1. https://web.dev/at-property/#writing-houdini-custom-properties
  2. https://css-tricks.com/using-property-for-css-custom-properties
  3. Cool Houdini demos

More Related Contents:

  1. How to keep origin in center of image in scale animation?
  2. How to make blinking/flashing text with CSS 3
  3. How can I create a marquee effect?
  4. Rotate objects around circle using CSS?
  5. Imitating a blink tag with CSS3 animations
  6. Animating Linear Gradient using CSS
  7. left-right movement.. css only very generic
  8. Is it possible to use CSS vars in CSS3 selectors?
  9. Avoiding repeated constants in CSS
  10. CSS border color switch animation: “from” color not correct
  11. How to Animate Gradients using CSS
  12. How to run the CSS3 animation to the end if the selector is not matching anymore?
  13. Ring-shaped process spinner with fading gradient effect around the ring
  14. infinite loop slider using keyframes css3
  15. How to keep styles after animation?
  16. Can a recursive variable be expressed in css?
  17. CSS Not Being Responsive
  18. Li item on two lines. Second line has no margin
  19. Add a background image (.png) to a SVG circle shape
  20. Two inline-block elements, each 50% wide, do not fit side by side in a single row
  21. Tables instead of DIVs [duplicate]
  22. Is type=”text/css” necessary in a tag?
  23. How can I make a link from a table cell
  24. Make row stretch across all columns in CSS Grid
  25. Flexbox affects overflow-wrap behavior
  26. How can I make a TextArea 100% width without overflowing when padding is present in CSS?
  27. How do I remove the top margin in a web page?
  28. Is text-indent: -9999px a bad technique for replacing text with images, and what are the alternatives?
  29. Radio buttons and label to display in same line
  30. Why does a border increase the element’s width?

Leave a Comment