DigtalBloomStudio

Css-Animation

top画像
Menu

基本の考え方

Css-Animation使用例

基本の考え方

animation-name

@keyframes XXX {} で設定したアニメーションの名前を設定します。


animation-duration

アニメーションの時間を設定します。アニメーションがループする設定の場合は、設定した秒数が繰り返し再生されます。
設定時は「1s」のように単位の「s（秒）」または「ms（0.？秒）」が必要です。


animation-timing-function

アニメーションが変化する速度

  • ease=>最初ゆっくり終わりゆっくり
  • linear=>一定の速度で
  • ease-in=>最初ゆっくり
  • ease-out=>終わりゆっくり
  • ease-in-out=>最初ゆっくり終わりゆっくり

animation-delay

アニメーションが開始するタイミングを設定します。
正数(+)を設定すると遅らせることができます。
負数(-)を設定した場合は、設定した秒数の分だけ進んだ状態でアニメーションが開始されます。
設定時は「0.5s」のように単位の「s（秒）」または「ms（0.？秒）」
初期値は0で、0sの場合は単に「0」とし、単位は必要ありません。


animation-iteration-count

アニメーションを何回繰り返すか設定します。
0以上の正数を設定でき、負数は無効となります。
「0.5」や「1.2」のような小数のある値を設定することも可能です。
infiniteを設定すると、アニメーションは無限に繰り返されます.


animation-direction

アニメーションの向きを設定します。

  • normal=>通常の向き
  • reverse=>逆向き
  • alternate=>正逆交互
  • alternate-reverse=>逆正交互

animation-play-state

アニメーションの再生状態を設定します。

  • running=>再生
  • paused=>停止

animation-fill-mode

要素のアニメーションの前後のスタイルを決められます

  • none=>アニメーションの前後でスタイルを変更しない
  • forwards=>アニメーションが終わった後のスタイルを保持
  • backwards=>アニメーションが始まる前のスタイルを保持
  • both=>アニメーションが始まる前と終わった後のスタイルを保持

Css-Animation使用例

  
  /* まとめて書いた場合 アニメーション名 アニメーション時間 イージング 遅延時間 繰り返し 逆再生 最後の状態を保持 */
  animation: animationName 1s ease 0.5s infinite alternate forwards;

  /* 分けて書いた場合 */
  animation-name: animationName;            /* アニメーション名 */
  animation-duration: 1s;                 /* アニメーション時間 */
  animation-timing-function: ease;       /* イージング */
  animation-delay: 0.5s;                /* 遅延時間 */
  animation-iteration-count: infinite; /* 繰り返し */
  animation-direction: alternate;     /* 逆再生 */
  animation-fill-mode: forwards;     /* 最後の状態を保持 */

透明化opacity

フェードイン10秒無限基本
  
  .animation-item {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 30px auto;
  padding: 0;

          /* 名前   時間  無限再生  アニメーションが終わった後のスタイルを保持 */
  animation: fadeIn 10s infinite forwards;
  }

  /* アニメーションの変化の割合＋名前 */
  @keyframes fadeIn {     
  0% {
  opacity: 0;     /* 透明化 */
  }
  100% {
  opacity: 1;    /* 透明化解除 */
  }
  }

ぺジェ曲線は、使用しても使用しなくても余り変化わからない気がする

フェードイン10秒無限ループ+ぺジェ曲
  
  .animation-item1 {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 30px auto;
  padding: 0;

  /* 名前 */
  /* 時間 */
  /* 0.33 は、開始点の x 座標です。1 は、開始点の y 座標です。0.68 は、終了点の x 座標です。1 は、終了点の y 座標です。 */
  /* 無限再生 */
  /* アニメーションが終わった後のスタイルを保持 */
  animation: fadeIn 10s cubic-bezier(0.33, 1, 0.68, 1)  infinite forwards;

  /* アニメーションの変化の割合＋名前 */
  @keyframes fadeIn {    
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
  }
  }
スライドイン(x180,右)(x-180,左)10秒間移動。再生されない場合は、ページリロード
  
  .animation-item2 {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 30px auto;
  padding: 0;
  animation: slideIn 10s forwards;
  }

  @keyframes slideIn {
  0% {
  transform: translateX(180px);    /* 180px 右に移動 */
  opacity: 0;
  }
  25% {
  transform: translateX(0);
  }
  50% {
  transform: translateX(-180px);     /* 180px 左に移動 */
  }
  100% {
  transform: translateX(0);
  }
  40%,100% {
  opacity: 1;
  }
  }
ポヨポヨ動く
  
  .animation-item3 {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 30px auto;
  padding: 0;
  animation: poyon 10s ease-in-out infinite forwards;
  }

  @keyframes poyon {
  0%  {
  transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
  transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
  transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
  transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
  transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
  opacity: 1;
  }
  }
Css-Animation参考URL
Top