アニメーション-animation_html/css_WEB-ITnose

アニメーション

===================================== === ============================================== =

1.@keyframes ルール

2.アニメーション属性

Webkit ベースのブラウザ(Safari、Chrome) -webit- プレフィックスを追加する必要があります。

期間:

アニメーション期間

-webkit-animation-duration

時間関数:

アニメーション タイミング関数

-webkit-animation-timing-function

遅延時間:

アニメーション遅延

-webkit-animation-delay

アニメーションの実行数:

アニメーション反復- count: count / 無限 (回数無制限)

-webkit-animation-iteration-count:

アニメーションの再生方向:

アニメーション-方向: ノーマル/リバース/交互/交互リバース

// ノーマル/リバース/最初のノーマル 2 番目のリバース/最初のリバースと 2 番目のノーマル

-webkit-animation-direction:

アニメーション再生前後の状態:

anime-fill-mode: none / reverses / forwards /both

//デフォルト値/設定再生前の要素の状態が最初のキーフレームと同じになる/再生後

🎜>

-webkit-animation-fill-mode:

アニメーションの制御実行中または一時停止中:

anime-play-state: 実行中 / 一時停止中

-webkit -animation-play-state

** **************************** ********************* ******************************************

アニメーション関連のすべてのスタイル

ただし、 1. 少なくともアニメーション名とアニメーション期間

2. アニメーション遅延の前のアニメーション期間

     div{            height:100px;            width:100px;            background: url(images/ball.png);            background-size:99.5%;            animation:myball_1 6s linear infinite alternate, myball_2 6s linear infinite;            -webkit-animation:myball_1 6s linear infinite alternate, myball_2 6s linear infinite;            animation-play-state:running;            -webkit-animation-play-state:running;        }        div:hover{            animation-play-state:paused;            -webkit-animation-play-state:paused;        }        @keyframes myball_1{            100%{ transform :rotate(360deg);}        }        @-webkit-keyframes myball_1{                    100%{transform:rotate(360deg);}        }        @keyframes myball_2{            0%,50%,100%{ opacity :1;}            25%,75%{ opacity:0 ;}        }        @-webkit-keyframes myball_2{                    0%,50%,100%{opacity:1;}                    25%,75%{opacity:0;}        }