﻿.Notification-Icon {
    animation-name: fadeInOut;
    animation-duration: 0.4s;
    animation-iteration-count: 10;
    animation-direction: alternate;
    animation-timing-function: ease-in;
    animation-fill-mode: backwards;
}

@keyframes fadeInOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.2;
    }
}

.RotateBackAndFourth {
    animation-name: RotateBackAndFourth;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
}

@keyframes RotateBackAndFourth {
    0% {
        transform: rotate(0deg);
        animation-timing-function: ease-out;
    }

    25% {
        transform: rotate(30deg);
        animation-timing-function: ease-in;
    }

    50% {
        transform: rotate(0deg);
        animation-timing-function: ease-out;
    }

    75% {
        transform: rotate(-30deg);
        animation-timing-function: ease-in;
    }

    100% {
        transform: rotate(0deg);
        animation-timing-function: ease-in;
    }
}