ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3 シンプルアニメーション_html/css_WEB-ITnose
CSS3 シンプルアニメーション_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:33:001236ブラウズ
css3のアニメーションは本当にとても綺麗です！ブラウザの互換性は重要です! 。
2 つの小さなアニメーションを共有します
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <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」です。ループの。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。