@charset "utf-8";


/******************************

  1. animetion class
  2. obj motion
  3. obj derey
  4. mouseover effect
  
******************************/


/**** 1. animetion class ****/

/* Fade */

.inviewFade {
  opacity: 0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transition: .8s;
}
.Fade {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* Up */

.inviewUp {
  opacity: 0;
  transform: translate(0, 50px);
  -webkit-transform: translate(0, 50px);
  transition-timing-function:ease-out;
  -webkit-transition-timing-function:ease-out;
  transition: .8s;
}
.Up {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* Down */

.inviewDown {
  opacity: 0;
  transform: translate(0, -50px);
  -webkit-transform: translate(0, -50px);
  transition-timing-function:ease-out;
  -webkit-transition-timing-function:ease-out;
  transition: .8s;
}
.Down {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* Left */

.inviewLeft {
  opacity: 0;
  transform: translate(50px, 0);
  -webkit-transform: translate(50px, 0);
  transition-timing-function:ease-out;
  -webkit-transition-timing-function:ease-out;
  transition: .8s;
}
.Left {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* LeftUp */

.inviewLeftUp {
  opacity: 0;
  transform: translate(100px, 100px);
  -webkit-transform: translate(100px, 100px);
  transition-timing-function:ease-out;
  -webkit-transition-timing-function:ease-out;
  transition: .8s;
}
.LeftUp {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* LeftDown */

.inviewLeftDown {
  opacity: 0;
  transform: translate(100px, -100px);
  -webkit-transform: translate(100px, -100px);
  transition-timing-function:ease-out;
  -webkit-transition-timing-function:ease-out;
  transition: .8s;
}
.LeftDown {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* Right */

.inviewRight {
  opacity: 0;
  transform: translate(-100px, 0);
  -webkit-transform: translate(-100px, 0);
  transition-timing-function:ease-out;
  -webkit-transition-timing-function:ease-out;
  transition: .8s;
}
.Right {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* RightUp */

.inviewRightUp {
  opacity: 0;
  transform: translate(-100px, 100px);
  -webkit-transform: translate(-100px, 100px);
  transition-timing-function:ease-out;
  -webkit-transition-timing-function:ease-out;
  transition: .8s;
}
.RightUp {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* RightDown */

.inviewRightDown {
  opacity: 0;
  transform: translate(-100px, -100px);
  -webkit-transform: translate(-100px, -100px);
  transition-timing-function:ease-out;
  -webkit-transition-timing-function:ease-out;
  transition: .8s;
}
.RightDown {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* FuwaFuwa */

.inviewFuwaFuwa, /* index avatar */
.inviewFuwaFuwa02 /* prr avatar */ {
  opacity: 0;
  transform: translate(100px, 100px);
  -webkit-transform: translate(100px, 100px);
  transition-timing-function:ease-out;
  -webkit-transition-timing-function:ease-out;
  transition: .8s;
}

.inviewFuwaFuwa03 /* prr navi */ {
  opacity: 0;
  transform: translate(-100px, 100px);
  -webkit-transform: translate(-100px, 100px);
  transition-timing-function:ease-out;
  -webkit-transition-timing-function:ease-out;
  transition: .8s;
}

.inviewFuwaFuwa .action {
  animation: fuwafuwa 2s ease-out 1.2s 1;
}

.inviewFuwaFuwa02 .action ,
.inviewFuwaFuwa03 .action {
  animation: fuwafuwa 2s ease-out -.4s 1;
}

.FuwaFuwa ,
.FuwaFuwa02,
.FuwaFuwa03 {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* Bird */

.inviewBird01 {
  opacity: 0;
  transform: translate(-100px, 100px);
  -webkit-transform: translate(-100px, 100px);
  transition-timing-function:ease;
  -webkit-transition-timing-function:ease;
  transition: .8s;
}

.inviewBird01 .action {
  animation: bird01 2s ease-out 1.2s 1;
}

.Bird01 {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

.inviewBird02 {
  opacity: 0;
  transform: translate(100px, 100px);
  -webkit-transform: translate(100px, 100px);
  transition-timing-function:ease;
  -webkit-transition-timing-function:ease;
  transition: .8s;
}

.inviewBird02 .action {
  animation: bird02 2s ease-out 1.2s 1;
}

.Bird02 {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* Dragon */

.inviewDragon01 {
  opacity: 0;
  transform: translate(100px, 100px);
  -webkit-transform: translate(100px, 100px);
  transition-timing-function:ease;
  -webkit-transition-timing-function:ease;
  transition: .8s;
}

.inviewDragon01 .action {
  animation: dragon01 2s ease-out 1.2s 1;
}

.Dragon01 {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* Jellyfish */

.inviewJellyfish {
  opacity: 0;
  transform: translate(0, 100px);
  -webkit-transform: translate(0, 100px);
  /*transition-timing-function:ease-out;
  -webkit-transition-timing-function:ease-out;*/
  transition: 1.8s;
}

.inviewJellyfish .action {
  animation: jellyfish 3s ease-out .4s 1;
}

.Jellyfish {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* jellyfish */

@-webkit-keyframes jellyfish {
	50% { transform: translateY(-10px); }
	60% { transform: translateY(0px); }
	70% { transform: translateY(-20px); }
	80% { transform: translateY(0px); }
	90% { transform: translateY(-40px); }
	100% { transform: translateY(0px); }
}
@keyframes jellyfish {
	0% { transform: translateX(0px); }
	20% { transform: translateX(40px); }
	40% { transform: translateX(-40px); }
	60% { transform: translateX(10px); }
	80% { transform: translateX(-10px); }
	100% { transform: translateX(0px); }
}


/* Jump L←R */

.inviewJump {
  opacity: 0;
  transform: translate(100px, 100px);
  -webkit-transform: translate(100px, 100px);
  transition-timing-function:ease;
  -webkit-transition-timing-function:ease;
  transition: .8s;
}

.inviewJump .action {
  animation: jump 2s ease-out .4s 1;
}

.Jump {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* Jump L→R */

.inviewJump02 {
  opacity: 0;
  transform: translate(-100px, 100px);
  -webkit-transform: translate(-100px, 100px);
  transition-timing-function:ease;
  -webkit-transition-timing-function:ease;
  transition: .8s;
}

.inviewJump02 .action {
  animation: jump 2s ease-out .4s 1;
}

.Jump02 {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* Jump */

.inviewJumpDin {
  opacity: 0;
  transform: translate(100px, 100px);
  -webkit-transform: translate(100px, 100px);
  transition-timing-function:ease;
  -webkit-transition-timing-function:ease;
  transition: .8s;
}

.inviewJumpDin .action {
  animation: jumpdin 2s ease-out .4s 1;
}

.JumpDin {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* TokoToko L←R */

.inviewTokoTokoWani03 ,
.inviewTokoTokoIgu ,
.inviewTokoTokoWolf ,
.inviewTokoTokoTirano ,
.inviewTokoTokoNezumi ,
.inviewTokoTokoAhiru {
  opacity: 0;
  transform: translate(60px, 0);
  -webkit-transform: translate(60px, 0);
  transition-timing-function:ease-out;
  -webkit-transition-timing-function:ease-out;
  transition: 1.8s;
}

.inviewTokoTokoWani03 .action ,
.inviewTokoTokoIgu .action ,
.inviewTokoTokoWolf .action ,
.inviewTokoTokoTirano .action ,
.inviewTokoTokoNezumi .action ,
.inviewTokoTokoAhiru .action {
  animation: tokotoko 3s ease-in-out 1s 1;
}

.TokoTokoWani03 ,
.TokoTokoIgu ,
.TokoTokoWolf ,
.TokoTokoTirano ,
.TokoTokoNezumi ,
.TokoTokoAhiru {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* TokoToko L→R */

.inviewTokoTokoNezumi02 ,
.inviewTokoTokoNezumi03 ,
.inviewTokoTokoWani01 ,
.inviewTokoTokoWani02 {
  opacity: 0;
  transform: translate(-60px, 0);
  -webkit-transform: translate(-60px, 0);
  transition-timing-function:ease-out;
  -webkit-transition-timing-function:ease-out;
  transition: 1.8s;
}

.inviewTokoTokoNezumi02 .action ,
.inviewTokoTokoNezumi03 .action ,
.inviewTokoTokoWani01 .action ,
.inviewTokoTokoWani02 .action {
  animation: tokotoko 3s ease-in-out 1s 1;
}

.TokoTokoNezumi02 ,
.TokoTokoNezumi03 ,
.TokoTokoWani01 ,
.TokoTokoWani02 {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* DokoDoko */

.inviewDokoDokoBuf {
  opacity: 0;
  transform: translate(60px, 0);
  -webkit-transform: translate(60px, 0);
  transition-timing-function:ease-out;
  -webkit-transition-timing-function:ease-out;
  transition: 1.8s;
}

.inviewDokoDokoBuf .action {
  animation: dokodoko 1s ease-in-out 1.6s 1;
}

.DokoDokoBuf {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* NokoNoko */

.inviewNokoNokoSai {
  opacity: 0;
  transform: translate(60px, 0);
  -webkit-transform: translate(60px, 0);
  transition-timing-function:ease-out;
  -webkit-transition-timing-function:ease-out;
  transition: 1.8s;
}

.inviewNokoNokoSai .action {
  animation: nokonoko 1s ease-in-out 1.6s 1;
}

.NokoNokoSai {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}


/**** 2. obj motion ****/

/* fuwafuwa */

@-webkit-keyframes fuwafuwa {
	0% { transform: rotate(-40deg); }
	80% { transform: rotate(0deg); }
}
@keyframes fuwafuwa {
	0% { transform: rotate(-40deg); }
	80% { transform: rotate(0deg); }
}

/* bird */

@-webkit-keyframes bird01 {
	0% { transform: rotate(20deg); }
	80% { transform: rotate(0deg); }
}
@keyframes bird01 {
	0% { transform: rotate(20deg); }
	80% { transform: rotate(0deg); }
}

@-webkit-keyframes bird02 {
	0% { transform: rotate(-20deg); }
	80% { transform: rotate(0deg); }
}
@keyframes bird02 {
	0% { transform: rotate(-20deg); }
	80% { transform: rotate(0deg); }
}

/* dragon */

@-webkit-keyframes dragon01 {
	0% { transform: rotate(20deg); }
	80% { transform: rotate(0deg); }
}
@keyframes dragon01 {
	0% { transform: rotate(20deg); }
	80% { transform: rotate(0deg); }
}

/* jump */

@-webkit-keyframes jump {
	50% { transform: translateY(-10px); }
	60% { transform: translateY(0px); }
	70% { transform: translateY(-20px); }
	80% { transform: translateY(0px); }
	90% { transform: translateY(-40px); }
	100% { transform: translateY(0px); }
}
@keyframes jump {
	50% { transform: translateY(-10px); }
	60% { transform: translateY(0px); }
	70% { transform: translateY(-20px); }
	80% { transform: translateY(0px); }
	90% { transform: translateY(-40px); }
	100% { transform: translateY(0px); }
}

/* jumpdin */

@-webkit-keyframes jumpdin {
	50% { transform: translateY(-40px); }
	60% { transform: translateY(0px); }
	70% { transform: translateY(-20px); }
	80% { transform: translateY(0px); }
	90% { transform: translateY(-10px); }
	100% { transform: translateY(0px); }
}
@keyframes jumpdin {
	50% { transform: translateY(-40px); }
	60% { transform: translateY(0px); }
	70% { transform: translateY(-20px); }
	80% { transform: translateY(0px); }
	90% { transform: translateY(-10px); }
	100% { transform: translateY(0px); }
}

/* tokotoko */

@-webkit-keyframes tokotoko {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(5deg); }
	30% { transform: rotate(0deg); }
	35% { transform: rotate(-5deg); }
	40% { transform: rotate(0deg); }
	45% { transform: rotate(5deg); }
	50% { transform: rotate(0deg); }
	55% { transform: rotate(-5deg); }
	60% { transform: rotate(0deg); }
	65% { transform: rotate(5deg); }
	70% { transform: rotate(0deg); }
	75% { transform: rotate(-5deg); }
	80% { transform: rotate(0deg); }
	85% { transform: rotate(5deg); }
	100% { transform: rotate(0deg); }
}

@keyframes tokotoko {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(5deg); }
	30% { transform: rotate(0deg); }
	35% { transform: rotate(-5deg); }
	40% { transform: rotate(0deg); }
	45% { transform: rotate(5deg); }
	50% { transform: rotate(0deg); }
	55% { transform: rotate(-5deg); }
	60% { transform: rotate(0deg); }
	65% { transform: rotate(5deg); }
	70% { transform: rotate(0deg); }
	75% { transform: rotate(-5deg); }
	80% { transform: rotate(0deg); }
	85% { transform: rotate(5deg); }
	100% { transform: rotate(0deg); }
}

/* tokotoko */

@-webkit-keyframes dokodoko {
	0% { transform: rotate(0deg); }
	5% { transform: rotate(5deg); }
	10% { transform: rotate(0deg); }
	15% { transform: rotate(-5deg); }
	20% { transform: rotate(0deg); }
	25% { transform: rotate(5deg); }
	30% { transform: rotate(0deg); }
	35% { transform: rotate(-5deg); }
	40% { transform: rotate(0deg); }
	45% { transform: rotate(5deg); }
	50% { transform: rotate(0deg); }
	55% { transform: rotate(-5deg); }
	60% { transform: rotate(0deg); }
	65% { transform: rotate(5deg); }
	70% { transform: rotate(0deg); }
	75% { transform: rotate(-5deg); }
	80% { transform: rotate(0deg); }
	85% { transform: rotate(5deg); }
	90% { transform: rotate(0deg); }
	95% { transform: rotate(-5deg); }
	100% { transform: rotate(0deg); }
}

@keyframes dokodoko {
	0% { transform: rotate(0deg); }
	5% { transform: rotate(5deg); }
	10% { transform: rotate(0deg); }
	15% { transform: rotate(-5deg); }
	20% { transform: rotate(0deg); }
	25% { transform: rotate(5deg); }
	30% { transform: rotate(0deg); }
	35% { transform: rotate(-5deg); }
	40% { transform: rotate(0deg); }
	45% { transform: rotate(5deg); }
	50% { transform: rotate(0deg); }
	55% { transform: rotate(-5deg); }
	60% { transform: rotate(0deg); }
	65% { transform: rotate(5deg); }
	70% { transform: rotate(0deg); }
	75% { transform: rotate(-5deg); }
	80% { transform: rotate(0deg); }
	85% { transform: rotate(5deg); }
	90% { transform: rotate(0deg); }
	95% { transform: rotate(-5deg); }
	100% { transform: rotate(0deg); }
}

/* nokonoko */

@-webkit-keyframes nokonoko {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(5deg); }
	40% { transform: rotate(0deg); }
	55% { transform: rotate(-5deg); }
	70% { transform: rotate(0deg); }
	85% { transform: rotate(5deg); }
	100% { transform: rotate(0deg); }
}

@keyframes nokonoko {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(5deg); }
	40% { transform: rotate(0deg); }
	55% { transform: rotate(-5deg); }
	70% { transform: rotate(0deg); }
	85% { transform: rotate(5deg); }
	100% { transform: rotate(0deg); }
}

/* scroll-down */

@-webkit-keyframes scroll-down {
  8.25% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  16.5% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  24.75% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  33% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  41.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  49.5% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes scroll-down {
  8.25% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  16.5% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  24.75% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  33% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  41.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  49.5% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}


/**** 3. obj derey ****/

ul.obj li {
  transition-delay:1.5s;
  -webkit-transition-delay:1.5s;
}

ul.ss li:nth-child(1) {
  transition-delay:.5s;
  -webkit-transition-delay:.5s;
}

ul.ss li:nth-child(2) {
  transition-delay:.7s;
  -webkit-transition-delay:.7s;
}

ul.ss li:nth-child(3) {
  transition-delay:.9s;
  -webkit-transition-delay:.9s;
}

ul.ss li:nth-child(4) {
  transition-delay:1.1s;
  -webkit-transition-delay:1.1s;
}

ul.ss li:nth-child(5) {
  transition-delay:1.3s;
  -webkit-transition-delay:1.3s;
}

.child-delay li:nth-child(1)  { transition-delay:0.5s; -webkit-transition-delay:0.5s; }
.child-delay li:nth-child(2)  { transition-delay:0.7s; -webkit-transition-delay:0.7s; }
.child-delay li:nth-child(3)  { transition-delay:0.9s; -webkit-transition-delay:0.9s; }
.child-delay li:nth-child(4)  { transition-delay:1.1s; -webkit-transition-delay:1.1s; }
.child-delay li:nth-child(5)  { transition-delay:1.3s; -webkit-transition-delay:1.3s; }
.child-delay li:nth-child(6)  { transition-delay:1.5s; -webkit-transition-delay:1.5s; }
.child-delay li:nth-child(7)  { transition-delay:1.7s; -webkit-transition-delay:1.7s; }
.child-delay li:nth-child(8)  { transition-delay:1.9s; -webkit-transition-delay:1.9s; }
.child-delay li:nth-child(9)  { transition-delay:2.1s; -webkit-transition-delay:2.1s; }
.child-delay li:nth-child(10) { transition-delay:2.3s; -webkit-transition-delay:2.3s; }
.child-delay li:nth-child(11) { transition-delay:2.5s; -webkit-transition-delay:2.5s; }
.child-delay li:nth-child(12) { transition-delay:2.7s; -webkit-transition-delay:2.7s; }
.child-delay li:nth-child(13) { transition-delay:2.9s; -webkit-transition-delay:2.9s; }
.child-delay li:nth-child(14) { transition-delay:3.1s; -webkit-transition-delay:3.1s; }
.child-delay li:nth-child(15) { transition-delay:3.3s; -webkit-transition-delay:3.3s; }
.child-delay li:nth-child(16) { transition-delay:3.5s; -webkit-transition-delay:3.5s; }
.child-delay li:nth-child(17) { transition-delay:3.7s; -webkit-transition-delay:3.7s; }
.child-delay li:nth-child(18) { transition-delay:3.9s; -webkit-transition-delay:3.9s; }
.child-delay li:nth-child(19) { transition-delay:4.1s; -webkit-transition-delay:4.1s; }
.child-delay li:nth-child(20) { transition-delay:4.3s; -webkit-transition-delay:4.3s; }

/* ▼dd単体にかけると、ハコニワを作ろうのパララックスが止まるので注意 */
.child-delay dd:nth-child(1) p  { transition-delay:0.5s; -webkit-transition-delay:0.5s; }
.child-delay dd:nth-child(2) p  { transition-delay:0.7s; -webkit-transition-delay:0.7s; }
.child-delay dd:nth-child(3) p  { transition-delay:0.9s; -webkit-transition-delay:0.9s; }
.child-delay dd:nth-child(4) p  { transition-delay:1.1s; -webkit-transition-delay:1.1s; }
.child-delay dd:nth-child(5) p  { transition-delay:1.3s; -webkit-transition-delay:1.3s; }
.child-delay dd:nth-child(6) p  { transition-delay:1.5s; -webkit-transition-delay:1.5s; }
.child-delay dd:nth-child(7) p  { transition-delay:1.7s; -webkit-transition-delay:1.7s; }
.child-delay dd:nth-child(8) p  { transition-delay:1.9s; -webkit-transition-delay:1.9s; }
.child-delay dd:nth-child(9) p  { transition-delay:2.1s; -webkit-transition-delay:2.1s; }
.child-delay dd:nth-child(10) p { transition-delay:2.3s; -webkit-transition-delay:2.3s; }
.child-delay dd:nth-child(11) p { transition-delay:2.5s; -webkit-transition-delay:2.5s; }
.child-delay dd:nth-child(12) p { transition-delay:2.7s; -webkit-transition-delay:2.7s; }
.child-delay dd:nth-child(13) p { transition-delay:2.9s; -webkit-transition-delay:2.9s; }
.child-delay dd:nth-child(14) p { transition-delay:3.1s; -webkit-transition-delay:3.1s; }
.child-delay dd:nth-child(15) p { transition-delay:3.3s; -webkit-transition-delay:3.3s; }
.child-delay dd:nth-child(16) p { transition-delay:3.5s; -webkit-transition-delay:3.5s; }
.child-delay dd:nth-child(17) p { transition-delay:3.7s; -webkit-transition-delay:3.7s; }
.child-delay dd:nth-child(18) p { transition-delay:3.9s; -webkit-transition-delay:3.9s; }
.child-delay dd:nth-child(19) p { transition-delay:4.1s; -webkit-transition-delay:4.1s; }
.child-delay dd:nth-child(20) p { transition-delay:4.3s; -webkit-transition-delay:4.3s; }


/**** 4. mouseover effect ****/

@-webkit-keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}