CODEWITHSUNDEEP
css-animations
Swapnil Dalvi
Swapnil Dalvi

Reputation: 1039

The animation style Not working with Chrome

animation style working fine with mozilla and changes color after 5sec but when I tried to run same code on chrome then its not taking that effect??

Style:

.changeColor{
    animation: change 5s step-end both;     
    } 
@keyframes change {
        from { color: red }
        to   { color: #4D4D4D }
    }

HTML:

<label class="changeColor">XYZ</label>

Upvotes: 0

Views: 107

Answers (1)

Bud Damyanov
Bud Damyanov

Reputation: 31919

Internet Explorer 10, Firefox, and Opera supports the @keyframes rule and animation property.

Chrome and Safari requires the prefix -webkit-.

@keyframes myfirst
 {
 from {background: red;}
 to {background: yellow;}
 }

 @-webkit-keyframes myfirst /* Safari and Chrome */
 {
 from {background: red;}
 to {background: yellow;}
 }

When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect.

Bind the animation to a selector by specifying at least these two CSS3 animation properties:

  • Specify the name of the animation

  • Specify the duration of the animation

Note: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property.

div
 {
 animation: myfirst 5s;
 -webkit-animation: myfirst 5s; /* Safari and Chrome */
 }

Upvotes: 1

Related Questions