@keyframes an_bubble {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(0.7)
    }
}

@keyframes an_rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes an_rotation_loading {
    from {
        stroke-dasharray : 4000;
        stroke-dashoffset: 3936;
    }

    to {
        stroke-dasharray : 4000;
        stroke-dashoffset: 4000;
    }
}

@keyframes an_appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes an_side_img {
    from {
        transform: translate(0, 0);
    }

    to {
        transform       : translate(0, -20px);
        background-image: url(/src/hero/side_hover.png)
    }
}

@keyframes an_appear_down {
    from {
        opacity  : 0;
        transform: translate(0, 20px);
    }

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

@keyframes an_appear_up {
    from {
        opacity  : 0;
        transform: translate(0, -20px);
    }

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

@keyframes an_appear_bottom {
    from {
        opacity  : 0;
        transform: translate(0, 20px);
    }

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

@keyframes an_popup {
    from {
        opacity  : 0;
        transform: translate(0, 100px);
    }

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

@keyframes an_popup_rotate {
    from {
        opacity  : 0;
        transform: translate(0, 100px) rotateY(90deg);
    }

    to {
        opacity  : 1;
        transform: translate(0, 0) rotateY(0deg);
    }
}

@keyframes an_appear_top {
    from {
        opacity  : 0;
        transform: translate(0, -20px);
    }

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

@keyframes an_circle_waves {
    from {
        transform: scale(1);
        opacity  : 1;
    }

    to {
        transform: scale(3);
        opacity  : 0;
    }
}

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

    70% {
        transform: scale(1.2);
    }

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

@keyframes an_expand_circle {
    from {
        opacity     : 0;
        stroke-width: 0.2px;
    }

    to {
        opacity     : 0.5;
        stroke-width: 0.8px;
    }
}

@keyframes an_flash_green {
    from {
        fill: #6EFF95;
    }

    to {
        fill: #53BE70;
    }
}

@keyframes an_flash {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.5;
    }
}

@keyframes an_multiElem {
    from {
        transform: rotateX(90deg);
    }

    to {
        transform: rotateX(0deg);
    }
}

@keyframes an_shake {
    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-10px, 0);
    }

    40% {
        transform: translate(10px, 0);
    }

    60% {
        transform: translate(-5px, 0);
    }

    80% {
        transform: translate(5px, 0);
    }

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

@keyframes an_wiggle {
    0% {
        transform                : rotate(-0.07deg);
        animation-timing-function: ease-in;
    }

    50% {
        transform                : rotate(0.1deg);
        animation-timing-function: ease-out;
    }
}


/*animation: an_rotation 1.2s 0s ease infinite forwards; */