CODEWITHSUNDEEP
css
punit sharma
punit sharma

Reputation: 25

CSS3 animation not working in chrome and internet explorer

i have used animation to rotate the logo image. It's worked on mozila but not working in chrome & IE.

animation:2s linear 0s normal none infinite clock;
-webkit-animation:2s linear 0s normal none infinite clock;
-ms-animation:2s linear 0s normal none infinite clock;
-o-animation:2s linear 0s normal none infinite clock;
-moz-animation:2s linear 0s normal none infinite clock;

Upvotes: 2

Views: 120

Answers (1)

Prashant
Prashant

Reputation: 704

hi dear see this link jsfiddle DEMO

css

.osc-tm-outer {
    background: #000;
    -webkit-border-radius: 2px 2px 0 0;
    -moz-border-radius: 2px 2px 0 0;
    -ms-border-radius: 2px 2px 0 0;
    border-radius: 2px 2px 0 0;
    color: #474747;
    height: 40px;
    line-height: 20px;
    overflow: hidden;
    padding:0;
    position: absolute;
    right: 0;
    text-align: center;
    text-indent: 80px;
    top: 0;
    width: 550px;


}
#osc-tm-end-preview{
    background: url("../images/osc-icon.png") no-repeat scroll 50% 5px #FFFFFF;
    height: 40px;
    width: 50px;
    transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    animation:2s linear 0s normal none infinite clock;
    -webkit-animation:2s linear 0s normal none infinite clock;
    -ms-animation:2s linear 0s normal none infinite clock;
    -o-animation:2s linear 0s normal none infinite clock;
    -moz-animation:2s linear 0s normal none infinite clock;
    position: absolute;
    left: 0;
    right: 0;
    text-indent: 110px;
}
@keyframes clock
                {
                from {left: 480px;} 
                to{left:20px;} 
                }
                @-moz-keyframes clock
                {
                from {left: 480px;} 
                to{left:20px;} 
                }
                @-webkit-keyframes clock
                {
                from {left: 480px;} 
                to{left:20px;} 
                }

Upvotes: 1

Related Questions