Answers for "css linear gradient animation"

CSS
0

css animation linear

animation-timing-function: linear;
Posted by: Guest on May-26-2020
23

Css gradient animations

Here a codePen with cool animations:
https://codepen.io/DevLorenzo/pen/ExgpvJM
Posted by: Guest on January-09-2021
0

animate css gradient

/* Animate Gradient using CSS Variables */

@property --pc { /* purple/coral */
  syntax: '<percentage>';
  inherits: false;
  initial-value: 30%;
}
@property --co { /* coral/orange */
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

.gradient {
  --pc: 0%;
  --co: 100%;
  
  width: 100vw;
  height: 100vh;
  transition: --pc 3s, --co 3s;
  background: linear-gradient(30deg, purple var(--pc), coral var(--co), orange);
}

.gradient:hover {
  --pc: -100%;
  --co: 0%;
}
Posted by: Guest on September-20-2021

Code answers related to "css linear gradient animation"

Browse Popular Code Answers by Language