.anim1 {
    animation-name: appear;
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}
  
@keyframes appear {
    0%{
        top:-15px;
        opacity: 0;
    }


    100%{
        top:0px;
        opacity: 1
    }
}

.animbounce {
    position: relative;
    animation: animbounce 160ms ease infinite;
}

@keyframes animbounce {
    0%, 100%{
        transform:0; 
    }


    50%{
        transform:-4px;
    }
}

.bounce2 {
  animation: bounce2 2400ms cubic-bezier(0.2, 0, 0, 1) infinite;
}

@keyframes bounce2 {
	0% {
        transform: translateY(0);
    }
    62.5% {
        transform: translateY(0);
    }

	81.25% {
        transform: translateY(-4px);
    }

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

/*6.25%*/
.rotate {
  will-change: transform; /* Smooth GPU rendering */
}


.slide {
	-webkit-animation: slide 3s ease-in-out alternate infinite;
	        animation: slide 3s ease-in-out alternate infinite;
}

@-webkit-keyframes slide {
  0% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
  }

  100% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
  }
}
@keyframes slide {
  0% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
  }

  100% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
  }
}