CSSアニメーションチートシート

バウンス（bounce）

⬆️

.bounce {
  display: inline-block;
  animation: bounce 1s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

回転（rotate）

🔄

.rotate {
  display: inline-block;
  animation: rotate 1.2s linear infinite;
}
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

フェードイン（fadein）

Hello!

.fadein {
  animation: fadein 2s ease-in;
}
@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

スライドイン（slidein）

→ Slide!

.slidein {
  display: inline-block;
  animation: slidein 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slidein {
  from { transform: translateX(-100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

拡大縮小（scale）

Zoom!

.scale {
  display: inline-block;
  animation: scale 1s infinite alternate;
}
@keyframes scale {
  from { transform: scale(1); }
  to { transform: scale(1.3); }
}

点滅（blink）

点滅

.blink {
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink {
  to { visibility: hidden; }
}

アウトライン出現（outline-appear）

Outline!

.outline-appear {
  position: relative;
  display: inline-block;
}
.outline-appear::after {
  content: '';
  position: absolute;
  left: -12px; top: -8px;
  width: calc(100% + 24px);
  height: calc(100% + 16px);
  border: 3px solid #4f8cff;
  border-radius: 12px;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  transform: scaleX(0);
  transition: none;
}
.outline-appear.animate::after {
  animation: outline-appear-anim 0.7s cubic-bezier(.4,1.6,.6,1) forwards;
}
@keyframes outline-appear-anim {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  30% {
    opacity: 1;
    transform: scaleX(0.2);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

タイプライター（typewriter）

Typewriter Effect

.typewriter {
  display: inline-block;
  overflow: hidden;
  border-right: .15em solid #4f8cff;
  white-space: nowrap;
  animation: typewriter 2.5s steps(18) 1 normal both, blink-caret .75s step-end infinite;
}
@keyframes typewriter {
  from { width: 0; }
  to { width: 13.5em; }
}
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #4f8cff; }
}

ズームイン（zoom-in）

Zoom In!

.zoom-in {
  display: inline-block;
  animation: zoom-in 0.7s cubic-bezier(.4,1.6,.6,1) both;
}
@keyframes zoom-in {
  from { transform: scale(0.2); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

フラッシュ（flash）

Flash!

.flash {
  animation: flash 1s linear 1;
}
@keyframes flash {
  0%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
  50% { opacity: 1; }
}

スモーク（smoke）

Smoke

.smoke {
  display: inline-block;
  animation: smoke 1.2s ease-out 1;
}
@keyframes smoke {
  0% { opacity: 0; filter: blur(8px); transform: translateY(30px) scale(0.8); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

スライドアップ（slide-up）

Slide Up!

.slide-up {
  display: inline-block;
  animation: slide-up 0.8s cubic-bezier(.4,1.6,.6,1) both;
}
@keyframes slide-up {
  from { transform: translateY(60px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

フェード＆拡大（fade-zoom）

Fade Zoom

.fade-zoom {
  display: inline-block;
  animation: fade-zoom 1s cubic-bezier(.4,1.6,.6,1) both;
}
@keyframes fade-zoom {
  0% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}

グリッチ（glitch）

GLITCH

.glitch {
  position: relative;
  color: #fff;
  background: #222;
  display: inline-block;
  animation: glitch 0.7s linear both;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  overflow: hidden;
  color: #4f8cff;
  z-index: 1;
}
.glitch::after {
  color: #ff6ec4;
  z-index: 2;
}
@keyframes glitch {
  0% { transform: none; }
  20% { transform: skew(-5deg); }
  40% { transform: skew(5deg); }
  60% { transform: translate(-2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: none; }
}

波紋（ripple）

Ripple

.ripple {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.ripple::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  background: rgba(79,140,255,0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ripple 0.7s linear;
}
@keyframes ripple {
  to {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

シャドウ拡大（shadow-pop）

Shadow Pop

.shadow-pop {
  display: inline-block;
  animation: shadow-pop 0.7s cubic-bezier(.4,1.6,.6,1) both;
}
@keyframes shadow-pop {
  0% { text-shadow: none; transform: scale(0.8); opacity: 0; }
  60% { text-shadow: 0 8px 32px #4f8cff88; opacity: 1; }
  100% { text-shadow: 0 2px 8px #4f8cff88; transform: scale(1); }
}

カラーフリップ（color-flip）

Color Flip

.color-flip {
  display: inline-block;
  animation: color-flip 1s cubic-bezier(.4,1.6,.6,1) both;
}
@keyframes color-flip {
  0% { color: #222; background: #fff; }
  50% { color: #fff; background: #4f8cff; }
  100% { color: #222; background: #fff; }
}

レインボーグロー（rainbow-glow）

Rainbow Glow

.rainbow-glow {
  display: inline-block;
  color: #fff;
  animation: rainbow-glow 2s linear infinite;
}
@keyframes rainbow-glow {
  0% { text-shadow: 0 0 8px #ff6ec4, 0 0 16px #4f8cff; color: #ff6ec4; }
  25% { text-shadow: 0 0 8px #4f8cff, 0 0 16px #6effc4; color: #4f8cff; }
  50% { text-shadow: 0 0 8px #6effc4, 0 0 16px #ffe66e; color: #6effc4; }
  75% { text-shadow: 0 0 8px #ffe66e, 0 0 16px #ff6ec4; color: #ffe66e; }
  100% { text-shadow: 0 0 8px #ff6ec4, 0 0 16px #4f8cff; color: #ff6ec4; }
}

3Dジャンプ（jump-3d）

3D Jump!

.jump-3d {
  display: inline-block;
  perspective: 400px;
  animation: jump-3d 1.2s cubic-bezier(.4,1.6,.6,1) both;
}
@keyframes jump-3d {
  0% { transform: rotateX(90deg) scale(0.2); opacity: 0; }
  60% { transform: rotateX(-10deg) scale(1.1); opacity: 1; }
  100% { transform: rotateX(0deg) scale(1); opacity: 1; }
}

炎エフェクト（fire-effect）

FIRE!

.fire-effect {
  display: inline-block;
  color: #fff;
  text-shadow: 0 0 8px #ff6e00, 0 0 24px #ff3e00, 0 0 48px #ff0000;
  animation: fire-effect 1.2s infinite alternate;
}
@keyframes fire-effect {
  0% { text-shadow: 0 0 8px #ff6e00, 0 0 24px #ff3e00, 0 0 48px #ff0000; }
  50% { text-shadow: 0 0 24px #ff6e00, 0 0 48px #ff3e00, 0 0 96px #ff0000; }
  100% { text-shadow: 0 0 8px #ff6e00, 0 0 24px #ff3e00, 0 0 48px #ff0000; }
}

スパーク（spark）

Spark!!

.spark {
  display: inline-block;
  position: relative;
  animation: spark 1s linear both;
}
.spark::after {
  content: '✨';
  position: absolute;
  left: 100%; top: 0;
  opacity: 0;
  animation: spark-after 1s linear both;
}
@keyframes spark {
  0% { color: #fff; }
  50% { color: #ffe66e; }
  100% { color: #fff; }
}
@keyframes spark-after {
  0% { opacity: 0; left: 100%; }
  40% { opacity: 1; left: 110%; }
  100% { opacity: 0; left: 120%; }
}

爆発（explode）

BOOM!

.explode {
  display: inline-block;
  animation: explode 0.7s cubic-bezier(.4,1.6,.6,1) both;
}
@keyframes explode {
  0% { letter-spacing: 0; opacity: 1; transform: scale(1); }
  60% { letter-spacing: 0.5em; opacity: 1; transform: scale(1.3); }
  100% { letter-spacing: 1em; opacity: 0; transform: scale(2); }
}

ネオン（neon）

NEON

.neon {
  display: inline-block;
  color: #fff;
  text-shadow: 0 0 8px #4f8cff, 0 0 24px #4f8cff, 0 0 48px #ff6ec4;
  animation: neon 1.2s alternate infinite;
}
@keyframes neon {
  0% { text-shadow: 0 0 8px #4f8cff, 0 0 24px #4f8cff, 0 0 48px #ff6ec4; }
  50% { text-shadow: 0 0 32px #ff6ec4, 0 0 64px #4f8cff, 0 0 128px #fff; }
  100% { text-shadow: 0 0 8px #4f8cff, 0 0 24px #4f8cff, 0 0 48px #ff6ec4; }
}

波打ち（wave）

Wave Animation

.wave {
  display: inline-block;
  animation: wave 1.2s infinite linear;
}
@keyframes wave {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-8deg); }
  40% { transform: rotate(14deg); }
  50% { transform: rotate(-4deg); }
  60% { transform: rotate(10deg); }
  70% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

シャッター（shutter）

SHUTTER

.shutter {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.shutter::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: #4f8cff;
  z-index: 2;
  animation: shutter 1s cubic-bezier(.4,1.6,.6,1) both;
}
@keyframes shutter {
  0% { left: 0; width: 100%; }
  100% { left: 100%; width: 0; }
}

パーティクル（particle）

Particle!

.particle {
  display: inline-block;
  position: relative;
  animation: particle 1.2s linear both;
}
.particle::after {
  content: '✦';
  position: absolute;
  left: 50%; top: 50%;
  font-size: 2em;
  color: #ffe66e;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  animation: particle-after 1.2s linear both;
}
@keyframes particle {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes particle-after {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  40% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
}

CSSアニメーション チートシート

バウンス（bounce）

回転（rotate）

フェードイン（fadein） 見る

スライドイン（slidein） 見る

拡大縮小（scale） 見る

点滅（blink）

アウトライン出現（outline-appear） 見る

タイプライター（typewriter）見る

ズームイン（zoom-in）見る

フラッシュ（flash）見る

スモーク（smoke）見る

スライドアップ（slide-up）見る

フェード＆拡大（fade-zoom）見る

グリッチ（glitch）見る

波紋（ripple）見る

シャドウ拡大（shadow-pop）見る

カラーフリップ（color-flip）見る

レインボーグロー（rainbow-glow）見る

3Dジャンプ（jump-3d）見る

炎エフェクト（fire-effect）見る

スパーク（spark）見る

爆発（explode）見る

ネオン（neon）見る

波打ち（wave）見る

シャッター（shutter）見る

パーティクル（particle）見る

CSSアニメーションチートシート

フェードイン（fadein）

スライドイン（slidein）

拡大縮小（scale）

アウトライン出現（outline-appear）

タイプライター（typewriter）

ズームイン（zoom-in）

フラッシュ（flash）

スモーク（smoke）

スライドアップ（slide-up）

フェード＆拡大（fade-zoom）

グリッチ（glitch）

波紋（ripple）

シャドウ拡大（shadow-pop）

カラーフリップ（color-flip）

レインボーグロー（rainbow-glow）

3Dジャンプ（jump-3d）

炎エフェクト（fire-effect）

スパーク（spark）

爆発（explode）

ネオン（neon）

波打ち（wave）

シャッター（shutter）

パーティクル（particle）