css3_html/css_WEB-ITnose での @keyframes の使用法についての紹介-htmlチュートリアル-php.cn

css3_html/css_WEB-ITnose での @keyframes の使用法についての紹介

WBOY

リリース： 2016-06-24 11:28:44

オリジナル

1816 人が閲覧しました

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/