ホームページ > 記事 > ウェブフロントエンド > css3_html/css_WEB-ITnose での @keyframes の使用法についての紹介
css3_html/css_WEB-ITnose での @keyframes の使用法についての紹介
- WBOYオリジナル
- 2016-06-24 11:28:441773ブラウズ
css3 での @keyframes の使用法についての紹介:
keyframes は中国語で「キーフレーム」と翻訳され、フラッシュの知識があれば、フラッシュと同じであることがわかります。 。
これを使用して、関連する状態を定義し、アニメーション効果を生成できます。
文法構造:
@keyframes animationname {keyframes-selector {css-styles;}} パラメータ分析:
1.animationname: 必須、アニメーションの名前を指定します。
2.keyframes-selector: 必須。アニメーションの長さを指定するために使用されます。パーセンテージまたは from to の形式で指定できます。
3.css-styles: 必須、CSS スタイル属性コード。
コード例:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style> div{ width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -moz-animation:mymove 5s infinite;/* Firefox */ -webkit-animation:mymove 5s infinite;/* Safari and Chrome */ -o-animation:mymove 5s infinite;/* Opera */}@keyframes mymove{ 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;}}/* Firefox */@-moz-keyframes mymove{ 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;}}/* Safari and Chrome */@-webkit-keyframes mymove{ 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;}}/* Opera */@-o-keyframes mymove{ 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;}}</style></head><body><div></div></body></html> 上記は比較的単純なアニメーション効果です。詳細については、関連資料を参照してください。
関連書籍:
1. @keyframes は、CSS3 での @keyframes の使用法に関する章を参照できます。
2. アニメーション属性については、CSS3のアニメーション属性の使い方の詳しい説明をご覧ください。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=15401
詳細については、以下を参照してください: http://www.softwhy.com/divcss/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。