/*animacion 1 */
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  .animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
  }
  /*the animation definition*/
  @-webkit-keyframes tada {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1)
    }
    10%,
    20% {
      -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
    }
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }
    40%,
    60%,
    80% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1)
    }
  }
  @keyframes tada {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      -ms-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1)
    }
    10%,
    20% {
      -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
      -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
    }
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }
    40%,
    60%,
    80% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      -ms-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1)
    }
  }
  .tada {
    -webkit-animation-name: tada;
    animation-name: tada;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: normal; 
    animation-timing-function: ease; 
    animation-delay: 3s; 
  }
  

/*animacion 2 */
  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  .animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
  }
  /*the animation definition*/
  @-webkit-keyframes rubberBand {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1)
    }
    30% {
      -webkit-transform: scale3d(1.25, .75, 1);
      transform: scale3d(1.25, .75, 1)
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1)
    }
    50% {
      -webkit-transform: scale3d(1.15, .85, 1);
      transform: scale3d(1.15, .85, 1)
    }
    65% {
      -webkit-transform: scale3d(.95, 1.05, 1);
      transform: scale3d(.95, 1.05, 1)
    }
    75% {
      -webkit-transform: scale3d(1.05, .95, 1);
      transform: scale3d(1.05, .95, 1)
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1)
    }
  }
  @keyframes rubberBand {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      -ms-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1)
    }
    30% {
      -webkit-transform: scale3d(1.25, .75, 1);
      -ms-transform: scale3d(1.25, .75, 1);
      transform: scale3d(1.25, .75, 1)
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      -ms-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1)
    }
    50% {
      -webkit-transform: scale3d(1.15, .85, 1);
      -ms-transform: scale3d(1.15, .85, 1);
      transform: scale3d(1.15, .85, 1)
    }
    65% {
      -webkit-transform: scale3d(.95, 1.05, 1);
      -ms-transform: scale3d(.95, 1.05, 1);
      transform: scale3d(.95, 1.05, 1)
    }
    75% {
      -webkit-transform: scale3d(1.05, .95, 1);
      -ms-transform: scale3d(1.05, .95, 1);
      transform: scale3d(1.05, .95, 1)
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      -ms-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1)
    }
  }
  .rubberBand:hover {
    animation-name: rubberBand;
    animation-duration: 1s;
  }