css的animation動畫的使用教程

大家都知道，不管是什麼項目，在前端裡都必須要注意的一點就是相容性。今天就給大家好好說一下關於相容性驗證的問題。

我們知道，不論做什麼前端項目，一定要注意的事項就是相容性，那麼今天就給大家帶來一份詳細的攻略，我們來看看需要相容驗證的瀏覽器有哪些。

我們知道，通過強大的CSS3可以建立各種動畫和特效，這是可以在很多網頁中取代圖片，Flash動畫以及JavaScript，今天就來給大家介紹一下CSS3的@keyframes 規則

CSS3 @keyframes 規則

如需在 CSS3 中建立動畫，您需要學習 @keyframes 規則。

@keyframes 規則用於建立動畫。在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。

那麼如何使用Css的animation動畫改版背景和位置，代碼如下：

@keyframes myfirst{0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0px;}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}} @-moz-keyframes myfirst /* Firefox */{0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0px;}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}} @-webkit-keyframes myfirst /* Safari 和 Chrome */{0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0px;}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}} @-o-keyframes myfirst /* Opera */{0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0px;}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

CSS3關於translate屬性的詳細介紹

CSS3關於background-size屬性的詳細介紹

CSS3函數rotate()怎麼使用