.rotate360 {
    --duration: 0.5s;

    animation: var(--duration) ease-in-out 0s 1 rotate360;
}

@-webkit-keyframes rotate360 {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

.fadeIn{
    --duration: 1s;
    --cubic: ease;
    --after-anim-mode: forwards;

    animation: var(--duration) var(--cubic) fadeIn var(--after-anim-mode);
}

@keyframes fadeIn{
    from{opacity: 0} to {opacity: 1;}
}

.Bounce {
    --duration: 2s;
    --cubic: cubic-bezier(0.280, 0.840, 0.420, 1);
    --after-anim-mode: forwards;

    animation: var(--duration) var(--cubic) BounceAnim var(--after-anim-mode);
}

@keyframes BounceAnim {
        0% { transform: scale(1,1) translateY(0); }
        10% { transform: scale(1.1,.9) translateY(0); }
        30% { transform: scale(.9,1.1) translateY(-100px); }
        50% { transform: scale(1,1) translateY(0); }
        57% { transform: scale(1,1) translateY(-7px); }
        64% { transform: scale(1,1) translateY(0); }
        100% { transform: scale(1,1) translateY(0); }
}