Sample game character animations with CSS.

Below you will find sample css styles for game character animations.

 

animations.css

Css

Bounce

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.character {
  animation: bounce 1s infinite;
}

Rotate

@keyframes rotate {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

.character {
  animation: rotate 2s linear infinite;
}

Fade

@keyframes fade {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.character {
  animation: fade 3s ease-in-out infinite;
}

Slide

@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(200px); }
  100% { transform: translateX(0); }
}

.character {
  animation: slide 2s linear infinite;
}

Scale

@keyframes scale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}

.character {
  animation: scale 1.5s ease-in-out infinite;
}

Shake

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.character {
  animation: shake 1s infinite;
}

Blink

@keyframes blink {
  0%, 50% { visibility: visible; }
  25%, 75% { visibility: hidden; }
}

.character {
  animation: blink 1s steps(1) infinite;
}

Fly

@keyframes fly {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.character {
  animation: fly 3s linear infinite;
}

Pulse

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.character {
  animation: pulse 2s ease-in-out infinite;
}

Spin

@keyframes spin {
  0% { transform: rotate(0); }
  25% { transform: rotate(90deg); }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}

.character {
  animation: spin 2s linear infinite;
}

Flicker

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.character {
  animation: flicker 0.5s linear infinite;
}

Float

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.character {
  animation: float 2s ease-in-out infinite;
}

Wave

@keyframes wave {
  0%, 100% { transform: rotate(0); }
  25%, 75% { transform: rotate(15deg); }
  50% { transform: rotate(-15deg); }
}

.character {
  animation: wave 1s ease-in-out infinite;
}

Run

@keyframes run {
  0% { background-position: 0 0; }
  100% { background-position: -500px 0; }
}

.character {
  animation: run 1s steps(10) infinite;
}

Explode

@keyframes explode {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.2); opacity: 0; }
}

.character {
  animation: explode 1s ease-in-out;
}

Jump

@keyframes jump {
  0% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

.character {
  animation: jump 1s ease-in-out infinite;
}

Swing

@keyframes swing {
  0% { transform: rotate(0); }
  50% { transform: rotate(15deg); }
  100% { transform: rotate(0); }
}

.character {
  animation: swing 1s ease-in-out infinite;
}

Sparkle

@keyframes sparkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.character {
  animation: sparkle 0.5s linear infinite;
}