// Copyright (C) arrowthemes, https://www.gnu.org/licenses/gpl.html GNU/GPL */

//
// Component: Animation
//
// ========================================================================

.uk-animation-fade {
    -webkit-animation-duration: 0.15s;
            animation-duration: 0.15s;
}

//
// Ripple effect
//

@-webkit-keyframes tm-ripple {

    100% { 
        opacity: 0;
        -webkit-transform: scale(2.5);
    }

}

@keyframes tm-ripple {

    100% { 
        opacity: 0;
        transform: scale(2.5);
    }

}

//
// To right from left
// 

@-webkit-keyframes tm-right-from-left {
    49% {
        -webkit-transform: translate(100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}

@keyframes tm-right-from-left {
    49% {
        transform: translate(100%);
    }
    50% {
        opacity: 0;
        transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}


//
// Fade with slide
//

// Top

@-webkit-keyframes uk-fade-top {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes uk-fade-top {
    0% {
        opacity: 0;
        transform: translateY(-10%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

// Bottom

@-webkit-keyframes uk-fade-bottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes uk-fade-bottom {
    0% {
        opacity: 0;
        transform: translateY(10%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

// Left 

@-webkit-keyframes uk-fade-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-10%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes uk-fade-left {
    0% {
        opacity: 0;
        transform: translateX(-10%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

// Right 

@-webkit-keyframes uk-fade-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(10%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes uk-fade-right {
    0% {
        opacity: 0;
        transform: translateX(10%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

// floating effect

@-webkit-keyframes tm-floating {
    0% { 
        -webkit-transform: translateY(0%); 
    }

    50% { 
        -webkit-transform: translateY(150%);
    }

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

@keyframes tm-floating {
    0% { 
        transform: translateY(0%);
    }

    50% { 
        transform: translateY(150%);
    }

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

// to Left from Right
@-webkit-keyframes toLeftFromRight {
    49% {
        -webkit-transform: translate(-100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(100%);
    }
    51% {
        opacity: 1;
    }
}
@-moz-keyframes toLeftFromRight {
    49% {
        -moz-transform: translate(-100%);
    }
    50% {
        opacity: 0;
        -moz-transform: translate(100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toLeftFromRight {
    49% {
        transform: translate(-100%);
    }
    50% {
        opacity: 0;
        transform: translate(100%);
    }
    51% {
        opacity: 1;
    }
}

// to Right from Left

@-webkit-keyframes toRightFromLeft {
    49% {
        -webkit-transform: translate(100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}

@-moz-keyframes toRightFromLeft {
    49% {
        -moz-transform: translate(100%);
    }
    50% {
        opacity: 0;
        -moz-transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}

@keyframes toRightFromLeft {
    49% {
        transform: translate(100%);
    }
    50% {
        opacity: 0;
        transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}

// rotate-plane
@-webkit-keyframes tm-rotateplane {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes tm-rotateplane {
    0% { 
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    } 

    50% {
        background-color: @global-secondary-background;
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    } 

    100% { 
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

// Pulsating

@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity:0.8;
  }
  45% {
    transform: scale(1.75);
    opacity:0;
  }
}
@keyframes stop-pulsate {
  from {
    opacity:0.4;
  }
  to {
    transform: scale(2);
    opacity:0;
  }
}