Loading...

Enton Biba LogoEnton Biba

Game Character Animations in Css

Date: July 17, 2023 CssGame Character AnimationsStyles
Game Character Animations in Css

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;
}