How to Animate Gradients using CSS

by

Please try this code:

#gradient
{
    height:300px;
    width:300px;
    border:1px solid black;
    font-size:30px;
    background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);
    background-size: 200% 200%;

    -webkit-animation: Animation 5s ease infinite;
    -moz-animation: Animation 5s ease infinite;
    animation: Animation 5s ease infinite;
}

@-webkit-keyframes Animation {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
@-moz-keyframes Animation {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
@keyframes Animation { 
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
<html>
<div id="gradient">
  Hello
</div>
</html>

More Related Contents:

  1. Animating Linear Gradient using CSS
  2. How to keep origin in center of image in scale animation?
  3. How to make blinking/flashing text with CSS 3
  4. How can I create a marquee effect?
  5. Rotate objects around circle using CSS?
  6. Imitating a blink tag with CSS3 animations
  7. How to create a curve between two gradient using CSS?
  8. Weird effect when applying transparent border over an element with a gradient background
  9. left-right movement.. css only very generic
  10. How to add border to a container with transparent gaps in between
  11. CSS border color switch animation: “from” color not correct
  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. CSS animate custom properties/variables
  15. infinite loop slider using keyframes css3
  16. How to keep styles after animation?
  17. Best way to center a on a page vertically and horizontally? [duplicate]
  18. With CSS, use “…” for overflowed block of multi-lines
  19. Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
  20. Html/Css Triangle with pseudo elements
  21. What is quirks mode?
  22. Unskewing the ends of an assortment multiple skewed images
  23. How to align two elements on the same line without changing HTML
  24. Scroll to a specific Element Using html
  25. Remove border from buttons
  26. Apply css to AREA MAP
  27. How can I show dots (“…”) in a span with hidden overflow?
  28. How to horizontal & vertical center a div [duplicate]
  29. CSS Selector “(A or B) and C”?
  30. How to change one element while hovering over another with CSS

Leave a Comment