運用css3動畫需要運用什麼規則-css教學-PHP中文網

運用css3動畫需要運用什麼規則

(*-*)浩

發布： 2019-06-04 18:02:56

原創

5568 人瀏覽過

CSS3 @keyframes 規則

#標籤定義及使用說明

使用@keyframes規則，你可以創建動畫。建立動畫是透過逐步改變從一個CSS樣式設定到另一個。 0％是開頭動畫，100％是當動畫完成。（推薦學習：CSS3影片教學。）語法

在動畫過程中，您可以更改CSS樣式的設定多次。	指定的變化時發生時使用％，或關鍵字"from"和"to"，這是和0％到100％相同。
為了獲得最佳的瀏覽器支持，您應該始終定義為0％和100％的選擇器。	注意: 使用animation屬性來控制動畫的外觀，也使用選擇器綁定動畫。 .
@keyframes animationname {keyframes-selector {css-styles;}} 登入後複製	#值說明

##animationname

必要的。定義animation的名稱。

#########keyframes-selector#############必要的。動畫持續時間的百分比。 ######合法值：######0-100%###from (和0%相同)###to (和100%相同)######注意：您可以用一個動畫keyframes-selectors。 ###############css-styles ##########必要的。一個或多個合法的CSS樣式屬性 ######################實例：#########

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS3</title> 
    <style> 
        div
        {
        width:100px;
        height:100px;
        background:blue;
        position:relative;
        animation:mymove 5s infinite;
        -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
        }
        
        @keyframes mymove
        {
        0%   {top:0px; background:blue; width:100px;}
        100% {top:200px; background:yellow; width:300px;}
        }
        
        @-webkit-keyframes mymove /* Safari and Chrome */
        {
        0%   {top:0px; background:blue; width:100px;}
        100% {top:200px; background:yellow; width:300px;}
        }
    </style>
</head>
<body>

<p><strong>注意:</strong> @keyframes 规则不兼容 IE 9 以及更早版本的浏览器.</p>

<div></div>

</body>
</html>

登入後複製

以上是運用css3動畫需要運用什麼規則的詳細內容。更多資訊請關注PHP中文網其他相關文章！