.goyang{
  animation-name: goyang;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.goyang.slow  { animation-duration: 3s; }
.goyang.medium{ animation-duration: 2s; }
.goyang.fast  { animation-duration: 1s; }

.goyang-2{
  transform-origin: bottom center;
  animation-name: goyang-2;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.goyang-2.slow  { animation-duration: 3s; }
.goyang-2.medium{ animation-duration: 2s; }
.goyang-2.fast  { animation-duration: 1s; }

.pulse{
  animation-name: pulse;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.pulse.slow  { animation-duration: 3s; }
.pulse.medium{ animation-duration: 2s; }
.pulse.fast  { animation-duration: 1s; }

.flap{
  animation-name: flap;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.flap.slow  { animation-duration: 3s; }
.flap.medium{ animation-duration: 2s; }
.flap.fast  { animation-duration: 1s; }

.pendulum {
  animation-name: swing;
  animation-iteration-count: infinite;
  animation-direction: cubic-bezier(0.42, 0.0, 0.58, 1);
}

.pendulum.slow  { animation-duration: 5.6s; }
.pendulum.medium{ animation-duration: 3.6s; }
.pendulum.fast  { animation-duration: 2.6s; }


.flip{
  animation: flip 2s ease-in-out infinite alternate;
}

.float-bob{
  animation: float-bob 6s ease-in-out infinite alternate;
}

.float-drift{
  animation: float-drift 9s cubic-bezier(.25,.8,.25,1) infinite alternate;
}

.grow-left{
  animation: growLeft 4s ease-in-out infinite alternate;
}

.grow-right{
  animation: growRight 4s ease-in-out infinite alternate;
}

.grow-side{
  animation: growSide 4s ease-in-out infinite alternate;
}

.up-down{
  animation: upDown 25s ease-in-out infinite alternate;
}

.blink-simple {
  animation: blink-simple 2s infinite;
}

.wave-2 {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 50%;
    max-height: 50px;
    margin-bottom: -15px;
    transform: translateX(-50%);
}

.wave-animation > use:nth-child(1) {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
}

.wave-animation > use:nth-child(2) {
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
}


.wave-animation > use {
    -webkit-animation: wave-move 25s 
    cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    animation: wave-move 25s 
    cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}


@keyframes goyang {
  0% {
    transform: rotate(5deg)  scale(1);
  }
  100% {
    transform: rotate(0deg)  scale(1.05);
  }
}

@keyframes goyang-2 {
  0% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale3d(0.8, 0.8, 0.8);
  }
  10% {
    transform: scale3d(1, 1, 1);
 }
}


@keyframes flap {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(.7);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes flip {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(-1);
  }
}

@keyframes float-bob {
    0%   { transform: translateY(0px) rotateZ(0deg) scale(1); }
    25%  { transform: translateY(-12px) rotateZ(-0.6deg) scale(1.005); }
    50%  { transform: translateY(0px) rotateZ(0deg) scale(1); }
    75%  { transform: translateY(8px) rotateZ(0.6deg) scale(0.995); }
    100% { transform: translateY(0px) rotateZ(0deg) scale(1); }
}

@keyframes float-drift {
    0%   { transform: translate3d(0,0,0) rotateZ(0deg) scale(1); }
    20%  { transform: translate3d(12px,-10px,0) rotateZ(-1deg) scale(1.01); }
    40%  { transform: translate3d(-10px,-6px,0) rotateZ(0.6deg) scale(0.995); }
    60%  { transform: translate3d(8px,12px,0) rotateZ(-0.8deg) scale(1.003); }
    80%  { transform: translate3d(-6px,6px,0) rotateZ(0.4deg) scale(0.998); }
    100% { transform: translate3d(0,0,0) rotateZ(0deg) scale(1); }
}

@keyframes growLeft {
  from {
    transform: scale(1) translateX(0);
  }
  to {
    transform: scale(1.1) translateX(-10px);
  }
}

@keyframes growRight {
  from {
    transform: scale(1) translateX(0);
  }
  to {
    transform: scale(1.1) translateX(10px);
  }
}

@keyframes growSide {
  0%   { transform: scale(1) translateX(0); }
  25%  { transform: scale(1.1) translateX(10px); }
  50%  { transform: scale(1) translateX(0); }
  75%  { transform: scale(1.1) translateX(-10px); }
  100% { transform: scale(1) translateX(0); }
}

@keyframes upDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  40% {
    -webkit-transform: translate3d(0, -5%, 0);
    transform: translate3d(0, -5%, 0);
  }

  50% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  60% {
    -webkit-transform: translate3d(0, -5%, 0);
    transform: translate3d(0, -5%, 0);
  }

  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  
}

@keyframes blink-simple {
  0%   { opacity: 1; transform: scaleY(1); }
  50%  { opacity: 0.35; transform: scaleY(0.98); }
  100% { opacity: 1; transform: scaleY(1); }
}


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


@keyframes wave-move {
  0% {
      -webkit-transform: translate3d(-90px, 0, 0);
      transform: translate3d(-90px, 0, 0);
  }

  100% {
      -webkit-transform: translate3d(85px, 0, 0);
      transform: translate3d(85px, 0, 0);
  }
}