CSS3 アニメーション ボールローリング JS コントロールアニメーション一時停止

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

CSS3 @keyframes ルール

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

@keyframes ルールはアニメーションを作成します。

@keyframes はルール内の CSS スタイルを指定し、アニメーションは現在のスタイルから新しいスタイルに徐々に変化します。

@keyframes myfirst /* myfirst はアニメーション名です*/
{
    {background: red;} より
    {背景: 黄色;} へ
}
@-webkit-keyframes myfirst /* Safari と Chrome */
{
    {background: red;} より
    {背景: 黄色;} へ
}

CSS3アニメーション

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

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

• アニメーションの名前を指定します
• アニメーションの継続時間を指定します

例: 「myfirst」アニメーションを 5 秒の継続時間で div 要素にバンドルします。

分割
{
    アニメーション: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari と Chrome */
}

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

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

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

スタイルは好きなだけ、何度でも変更できます。

変更が発生する時間をパーセンテージで指定するか、0% と 100% に相当するキーワード「from」と「to」を使用してください。

0% はアニメーションの開始で、100% はアニメーションの終了です。

最適なブラウザサポートを得るには、常に 0% および 100% セレクターを定義する必要があります。

例: アニメーションが 25% と 50% のときに背景色を変更し、アニメーションが 100% 完了したときに再度背景色を変更します。

@keyframes マイファースト
{
    0% {背景: 赤;}
    25% {背景: 黄色;}
    50% {背景: 青;}
    100% {背景: 緑;}
}
@-webkit-keyframes myfirst /* Safari と Chrome */
{
    0% {背景: 赤;}
    25% {背景: 黄色;}
    50% {背景: 青;}
    100% {背景: 緑;}
}

次は私が書いたちょっとした練習問題です。 CSSアニメーションにより、ボールは芝生の上を無限に転がり、アニメーションの実行と一時停止を制御するための2つのボタンが追加されました（上部の赤いボールは2333年に描いた太陽です）

要約する

上記は、エディターが紹介した CSS3 アニメーション ボール ローリング JS コントロール アニメーション ポーズです。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!