CSS3 シンプルアニメーション_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS3 シンプルアニメーション_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:33:00

オリジナル

1188 人が閲覧しました

css3のアニメーションは本当にとても綺麗です！ブラウザの互換性は重要です! 。

2 つの小さなアニメーションを共有します

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus&reg;">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>C3动画</title>  <style>    /*****************/    #d1{width:50px;height:50px;background-color:green;float:left;        border-radius:50%;}    #d2{width:50px;height:50px;background-color:red;float:left;        border-radius:50%;position:relative;}    @-webkit-keyframes jump{    0%{transform:rotate(0deg);opacity:1;}    25%{transform:rotate(-10deg);opacity:0.5;}    50%{transform:rotate(0deg);opacity:1;}    75%{transform:rotate(10deg);opacity:0.5;}    100%{transform:rotate(0deg);opacity:1;}    }    #d1{-webkit-animation:jump 0.3s linear infinite;}    @-webkit-keyframes move{        0%{left:10px;background-color:blue;}        50%{left:800px;background-color:yellow;}        100%{left:10px;background-color:red;}    }    #d2{-webkit-animation:move 5s linear infinite;}  </style> </head> <body>    <div id="d1"></div>    <div id="d2"></div> </body></html>

ログイン後にコピー

このブログのトップページにある 2 つの小さな円のような効果です。

注意すべき点は次のとおりです:

1. CSS でアニメーションを作成する場合、互換性を処理する必要があります。 o -animation: ; anime:

また、animation: anime-name、animation-duration、animation-timing-function、animation-iteration-count

animation-name: はアニメーションの名前を定義するために使用されます

アニメーション -duration は、要素がアニメーションを再生する期間を指定するために使用されます。値: は数値であり、単位は s (秒) です。デフォルト値は「0」です。

animation-timing-function: 時間の進行に応じて属性値を変化させる要素の変形率を指します

以下の6つがあります。変換方法: イーズ;イーズイン;イーズインアウト;線形;三次ベジェ。再生速度です~

animation-iteration-countは、アニメーションを再生する要素のループ数を指定するために使用されます。数値の値を取ることができ、そのデフォルト値は「1」です。ループの。