Browser compatibility issues arise because of different browser cores
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= ' Utf-8 '/>5 <title>The transformation of the background color</title>6 <styletype= "Text/css">7 Div{8 width:200px;9 Height:200px;Ten background:Blue; One Animation:Myfirst 5s; A -moz-animation:Myfirst 5s; /*inside Firefox*/ - -webkit-animation:Myfirst 5s; /*Google and Safair inside*/ - -o-animation:Myfirst 5s; /*Open Gate Browser*/ the } - /*inside Firefox*/ - @-moz-keyframes Myfirst{ - 0%{background:Blue} + 25%{background:Red} - 50%{background:Yellow} + 100%{background:Green} A } at /*Google and Safari inside*/ - @-webkit-keyframes Myfirst{ - 0%{background:Blue} - 25%{background:Red} - 50%{background:Yellow} - 100%{background:Green} in } - /*Open Gate Browser*/ to @-o-keyframes Myfirst{ + 0%{background:Blue} - 25%{background:Red} the 50%{background:Yellow} * 100%{background:Green} $ }Panax Notoginseng </style> - </Head> the <Body> + <Div><H1>What is the content?</H1></Div> A </Body> the </HTML> + - $ $ - <!--<! DOCTYPE html> - the - <style>Wuyi Div the { - width:200px; Wu height:200px; - background:red; About Animation:myfirst 5s; $ -moz-animation:myfirst 5s; */* Firefox * / - -webkit-animation:myfirst 5s; */Safari and Chrome * / - -o-animation:myfirst 5s; */Opera * / - } A + @keyframes Myfirst the { - 0% {background:red;} $ 25% {background:yellow;} the 50% {background:blue;} the 100% {background:green;} the } the - @-moz-keyframes Myfirst/* Firefox * / in { the 0% {background:red;} the 25% {background:yellow;} About 50% {background:blue;} the 100% {background:green;} the } the + @-webkit-keyframes myfirst/* Safari and Chrome * / - { the 0% {background:red;}Bayi 25% {background:yellow;} the 50% {background:blue;} the 100% {background:green;} - } - the @-o-keyframes Myfirst/* Opera * / the { the 0% {background:red;} the 25% {background:yellow;} - 50% {background:blue;} the 100% {background:green;} the } the </style>94 the <body> the the <div></div>98 About <p><b> Note:</b> When the animation is complete, it changes back to the original style. </p> - 101 <p><b> Note:</b> This example is not valid in Internet Explorer. </p>102 103 </body>104 the -
The Remarks section is an example of w3school above
Automatic switching of background color of CSS3 animation