馬老師CSS3範例 - 動畫From、To效果

原始碼：

<style> #box { width:100px; height:100px; background-color:#CCF; animation:myanimation 5s; -moz-animation:myanimation 5s; /* Firefox */ -webkit-animation:myanimation 5s; /* Safari and Chrome */ -o-animation:myanimation 5s; /* Opera */ } @keyframes myanimation { from {background:#FC0;} to {background:#CCF;} } @-moz-keyframes myanimation /* Firefox */ { from {background:#FC0;} to {background:#CCF;} } @-webkit-keyframes myanimation /* Safari and Chrome */ { from {background:#FC0;} to {background:#CCF;} } @-o-keyframes myanimation /* Opera */ { from {background:#FC0;} to {background:#CCF;} } </style> <div id="box">網頁內容</div>

瀏覽器相容性：

顯示結果：