CSS Animations - yagisawatakuya/Wiki GitHub Wiki

回転

// rotate(回転角度)
// rotateX(回転角度)
// rotateY(回転角度)
// rotateZ(回転角度)
// rotate3d(数値, 数値, 数値, 回転角度)
transform: rotate(-45deg);

無限回転

.test {
  animation: spin 3s linear infinite;
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

https://on-ze.com/archives/510

左右反転・上下反転

// 左右反転
transform: scale(-1, 1);
// 上下反転
transform: scale(1, -1);

http://blog.yuhiisk.com/archive/2016/09/02/css-flip-horizontal.html

オーバレイサンプル

https://www.nxworld.net/tips/10-css-overlay-effects.html

ひらひらCSSアニメーション

http://liginc.co.jp/web/html-css/css/154338

ウネウネ動く円

https://q-az.net/css-uneune-circle/

@keyframes uneune {

  0% {
    border-radius: 60% 50% 70% 80% / 50% 60% 50% 70%; 
  }

  25% {
    border-radius: 70% 60% 60% 90% / 70% 80% 40% 90%; 
  }

  50% {
    border-radius: 60% 40% 70% 60% / 40% 60% 50% 60%; 
  }

  75% {
    border-radius: 90% 60% 40% 70% / 70% 50% 80% 40%; 
  }

  100% {
    border-radius: 60% 50% 70% 80% / 50% 60% 50% 70%; 
  }
}

変化が始まる時間を指定

transition-delay: 1s;
animation-delay: 1s;

水の波紋っぽいエフェクト

http://kachibito.net/css/css-ripple-effect

nimation終了時の処理

$('.js-anime--scene1').on('animationend webkitAnimationEnd', function() {
    // animation終了時の処理
    $(this).addClass('hidden');
});

フローティングラベル

https://coliss.com/articles/build-websites/operation/css/elastic-input-animation.html

スクロールイベント

https://coliss.com/articles/build-websites/operation/javascript/js-add-css-animation-delighters.html