CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのアニメーション効果

アニメーションは、モーションエフェクトを作成し、外観を変更するプロセスです。CSSは、イベントモーションを変更するために、さまざまなアニメーションエフェクトをサポートしています。

アニメーションでは、キーフレームという概念が使用されます。キーフレームは、CSS3の中間アニメーションステップを制御します。

次の例は、キーフレーム構文を使用したアニメーションの高さ、幅、色、名前、および継続時間を示しています-

構文 
@keyframes animation {
   from {background-color: pink;}
   to {background-color: green;}
}

div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
}

  1. CSSの不透明度でアニメーションを実行する

    CSSを使用して不透明度プロパティにアニメーションを実装するには、次のコードを実行してみてください。 例 <!DOCTYPE html> <html>    <head>       <style>          #demo1 {             position: absolute;             to

  2. CSSマージントップでアニメーションを実行する

    CSSを使用してmargin-topプロパティにアニメーションを実装するには、次のコードを実行してみてください 例 <!DOCTYPE html> <html>    <head>       <style>          div {             background-color: orange;           &