@mixin nav-sticky ($name) {
    @keyframes #{$name} {
        0% {
            opacity: 0;
            top: -100px;
        }

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

// shaking
@mixin shaking ($name) {
    @keyframes #{$name} {
        0% {
            transform: rotate(0deg);
        }

        40% {
            transform: rotate(15deg);
        }

        80% {
            transform: rotate(-15deg);
        }

        100% {
            transform: rotate(0deg);
        }
    }
}

// Pulse 
@mixin Pulse ($name) {
    @keyframes #{$name} {
        100% {
            transform: scale(1.5);
            opacity: 0;
        }
    }
}

// scale image
@mixin scaleImg ($name) {
    @keyframes #{$name} {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.07);
        }

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

// move line
@mixin movingLine ($name) {
    @keyframes #{$name} {

        0%,
        100% {
            left: 50%;
            width: 20px;
        }

        15%,
        55% {
            width: 30px;
        }

        30%,
        70% {
            width: 40px;
        }

        40% {
            left: calc(90% - 30px);
            width: 50px;
        }


        80% {

            left: calc(8% + 30px);
            width: 50px;
        }
    }
}