@keyframes規則 アニメーション コピペで使えるHTML+CSS

スポンサーリンク
スポンサーリンク

@keyframes規則

アニメーションの実現CSS
@keyframes
目的 htmlについてアニメーションを実現します
使用 すべて
アニメーションします
<div class="animation-div">アニメーションします</div>
@keyframes keyanime{
  0% {
    height:0px;
    background-color:#67b44a;
  }
  100% {
    height: 300px; 
    background-color:#dd5656;
  }
}
.animation-div{
  animation-name: keyanime ; 
  animation-duration: 3s; /* 3秒間動く */
  animation-fill-mode: both;
}

仕組み

  1. @keyframes name によって、アニメーションの始点と終点の状態を名称nameとして指定します。
  2. 対象となるcssについて、animation-nameでnameを指定し、 durationで時間、fill-modeで状態を維持するかどうかを指定します。 fill-mode: bothとすれば、終了時点の状態が維持されます。
  3. より細かいアニメーション設定については、animationプロパティで指定します。

ボックスの表示非表示をアニメーションで実現する

CSSのみでクリックによりボックスが開くアニメーション コピペで使えるHTML+CSS
JavaScriptを用いず、CSSのみでアコーディオンアニメーションdivボックスを実現します。ページを読み込んだ際に開いた状態とならないよう、ラジオボタンとチェックボックスの2つをフラグとして利用します。CSSのみで実現できる限界点の一つ。