css3アニメーションボールローリング、jsコントロールアニメーション一時停止

Css3 Animation Ball Rolling

CSS3はアニメーションを作成でき、多くのWebページアニメーション画像、Flashアニメーション、JavaScript効果を置き換えることができます。

CSS3 @ keyframesルール

CSS3アニメーションを作成するには、@ keyframesルールを理解する必要があります。

@keyframesルールは、アニメーションを作成することです。

@keyframesルールで指定されたCSSスタイルとアニメーションは、現在のスタイルから新しいスタイルに徐々に変更されます。

@keyframes myfirst /* myfirst is the animation name */ { from {background: red} to {background: yellow} } @-webkit-keyframes myfirst /* Safari and Chrome */ { from {background: red} to {background: yellow} }

CSS3アニメーション

いつ @keyframes アニメーションを作成してセレクターにバインドします。そうしないと、アニメーションは効果がありません。

少なくとも次の2つのCSS3アニメーションプロパティがセレクターにバインドされていることを指定します。

• アニメーションの名前を指定します
• アニメーションの長さを指定します

例：「myfirst」アニメーションをdiv要素にバインドします。期間は5秒です。

div { animation: myfirst 5s -webkit-animation: myfirst 5s /* Safari and Chrome */ }

注意： アニメーションの名前とアニメーションの長さを定義する必要があります。期間を省略すると、デフォルト値が0であるため、アニメーションは実行されません。

CSS3アニメーションとは何ですか？

アニメーションは、あるスタイルから別のスタイルに要素を徐々に変更する効果です。

スタイルは何度でも変更できます。

パーセンテージを使用して変更が発生する時間を指定するか、キーワード「from」および「to」を使用してください。これらは0％および100％に相当します。

0％はアニメーションの開始であり、100％はアニメーションの完了です。

最高のブラウザサポートを得るには、常に0％と100％のセレクターを定義する必要があります。

例：アニメーションが25％と50％のときに背景色を変更し、アニメーションが100％完了したらもう一度背景色を変更します。

@keyframes myfirst { 0% {background: red} 25% {background: yellow} 50% {background: blue} 100% {background: green} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background: red} 25% {background: yellow} 50% {background: blue} 100% {background: green} }

次は私が書いた小さな練習です。 cssアニメーションを使用して、芝生の上でボールを無限に転がし、アニメーションの実行と一時停止を制御する2つのボタンを追加します（一番上の赤いボールは、私が描いた太陽2333です）。

コンセプトはから引用されています 初心者チュートリアル