Title: Gradient Animation CSS3
Last modified: August 31, 2016

---

# Gradient Animation CSS3

 *  [cindyduong](https://wordpress.org/support/users/cindyduong/)
 * (@cindyduong)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/gradient-animation-css3/)
 * Hello! I am using the SiteOrigin Visual Editor and trying to make one row have
   an animated gradient background using only CSS.
 * I am inputting the CSS in the “CSS Styles” panel of the visual editor’s row ‘
   attributes,’ and it displays the first still frame of the animation but is not
   animated. Is there a way to make this work?
 * The code for the animation is below, and the webpage is [http://www.cindyduong.com/portfolio-dupe/](http://www.cindyduong.com/portfolio-dupe/)
 *     ```
       body {
           width: 1280;
           height: 500px;
           background-color: #44c1c0;
           -webkit-animation-name: example; /* Chrome, Safari, Opera */
           -webkit-animation-duration: 6s; /* Chrome, Safari, Opera */
           animation-name: example;
           animation-duration: 6s;
           animation-iteration-count: infinite;
           animation-direction: alternate;
       }
   
       /* Chrome, Safari, Opera */
       @-webkit-keyframes example {
           from {background-color: #f4e501;}
           to {background-color: #44c1c0;}
       }
   
       /* Standard syntax */
       @keyframes example {
           from {background-color: #f4e501;}
           to {background-color: #44c1c0;}
       }
       ```
   

The topic ‘Gradient Animation CSS3’ is closed to new replies.

## Tags

 * [background](https://wordpress.org/support/topic-tag/background/)
 * [css3](https://wordpress.org/support/topic-tag/css3/)

 * 0 replies
 * 1 participant
 * Last reply from: [cindyduong](https://wordpress.org/support/users/cindyduong/)
 * Last activity: [10 years, 2 months ago](https://wordpress.org/support/topic/gradient-animation-css3/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics