HTML フロントエンド開発への道 --Animation_html/css_WEB-ITnose

アニメーションもトランジションと同様のアニメーション効果ですが、トランジションはアニメーションの初期状態を制御することしかできませんが、アニメーションはアニメーションのトランジションプロセスを定義するためにキーフレームを設定できます。

アニメーションは @ を使用します。キーフレームを使用して、アニメーション変更のキー フレームを含む変更プロセス {} をカスタマイズします (例:

@-webkit-keyframes mycolor {<br />    0%{<br />        background-color: brown;<br />    }<br />    40%{<br />        background-color: aqua;<br />    }<br />    70%{<br />        background-color: #555555;<br />    }<br />    100%{<br />        background-color: brown;<br />    }<br /> }

)。その後、ホバー、アクティブなどの対応するアクションに従ってアニメーション プロセスをトリガーします。アニメーションとトランジションには、property、duration、timing-function の 3 つのサブ属性値があります。

さらに、timing-function には、linear、ease、ease-in、ease-out、ease-in-out の 5 つの値があります。

リニア: 一定の速度で変化します。

イーズイン: 低速から高速へ。

イーズインとイーズイン - アウト効果は同じで、ゆっくりから速く、そしてまたゆっくりになります。