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()怎麼使用

#

以上是css的animation動畫的使用教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！