jrpg.css

body {
  background: black;
}

canvas{
	width: 1280px;
	height: 720px;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#bg{
  background: url("assets/bg1.png");
}

#title{
	background: url("assets/title.png");
}

@keyframes fadeINTRO {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } 
}

@keyframes enemyDeath {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } 
}

@keyframes battleIntro {
  0% { transform: translate3d(-100%, 0, 0); }
  10% { transform: translate3d(-80%, 0, 0); }
  20% { transform: translate3d(-50%, 0, 0); }
  30% { transform: translate3d(-10%, 0, 0); }
  35% { transform: translate3d( 0%, 0, 0); }
  40% { transform: translate3d(-5%, 0, 0); }
  50% { transform: translate3d(-10%, 0, 0); }
  60% { transform: translate3d(-12%, 0, 0); }
  65% { transform: translate3d(-10%, 0, 0); }
  70% { transform: translate3d(-5%, 0, 0); }
  80% { transform: translate3d( 0%, 0, 0); }
  90% { transform: translate3d(-1%, 0, 0); }
  100% { transform: translate3d(0%, 0, 0); }
}

@keyframes takeDamage {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes enemyTakeDamage {
  0% { opacity: 0; }
  10% { opacity: 1; }
  20% { opacity: 0; }
  30% { opacity: 1; }
  40% { opacity: 0; }
  50% { opacity: 1; }
  60% { opacity: 0; }
  70% { opacity: 1; }
  80% { opacity: 0; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes death {
  20% {
    opacity: 0.2;
  }

  40% {
    opacity: 1;
  }

  60% {
    opacity: 0.2;
  }

  80% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
  }
}

@keyframes bossDeath {
  10%, 90% {
    transform: translate3d(-3px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(6px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-8px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(8px, 0, 0);
  }
}