[data-animate]{
  visibility: hidden;
}

[data-animate].played{
  visibility: visible;
}


.spin{
  animation: spin 1.2s infinite linear
}

@keyframes spin{
  0%{
    transform:rotate(0deg)
  }

  100%{
    transform:rotate(359deg)
  }
}

.animate-updown{
  animation: updown 3s infinite ease-in-out;
}

@keyframes updown {
  0% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.05);
  }

  100% {
    transform: translateY(0)  scale(1);
  }
}



.animate-top{
  animation: animatetop 1s ease-in-out
}

@keyframes animatetop {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-top-left{
  animation: animatetopleft 1s ease-in-out
}

@keyframes animatetopleft {
  0% {
    transform: translate(-100px, -100px);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.animate-top-right{
  animation: animatetopright 1s ease-in-out
}

@keyframes animatetopright {
  0% {
    transform: translate(100px, -100px);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.animate-bottom{
  animation: animatebottom 1s ease-in-out
}

@keyframes animatebottom {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-bottom-left{
  animation: animatebottomleft 1s ease-in-out
}

@keyframes animatebottomleft {
  0% {
    transform: translate(-100px, 100px);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.animate-bottom-right{
  animation: animatebottomright 1s ease-in-out
}

@keyframes animatebottomright {
  0% {
    transform: translate(100px, 100px);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.animate-left{
  animation: animateleft 1s ease-in-out
}

@keyframes animateleft {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-right{
  animation: animateright 1s ease-in-out
}

@keyframes animateright {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}