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

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

//
// 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;
    }
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loader-inner {
  0% {
    height: 100%;
  }
  25% {
    height: 100%;
  }
  50% {
    height: 0%;
  }
  75% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}
@-webkit-keyframes loader-inner {
  0% {
    height: 100%;
  }
  25% {
    height: 100%;
  }
  50% {
    height: 0%;
  }
  75% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}

// 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;
  }
}

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

// infinity

@keyframes infinity {
    12.5% {
        stroke-dasharray: 42px, 300px;
        stroke-dashoffset: -33px;
    }
    43.75% {
        stroke-dasharray: 105px, 300px;
        stroke-dashoffset: -105px;
    }
    100% {
        stroke-dasharray: 3px, 300px;
        stroke-dashoffset: -297px;
    }
}

// Puzzle

@keyframes puzzle-slide {
    0% {
        transform: translate(0, 0);
    }
    2% {
        transform: translate(33px, 0);
    }
    12.5% {
        transform: translate(33px, 0);
    }
    15.5% {
        transform: translate(66px, 0);
    }
    25% {
        transform: translate(66px, 0);
    }
    27% {
        transform: translate(66px, 33px);
    }
    37.5% {
        transform: translate(66px, 33px);
    }
    39.5% {
        transform: translate(33px, 33px);
    }
    50% {
        transform: translate(33px, 33px);
    }
    52% {
        transform: translate(33px, 66px);
    }
    62.5% {
        transform: translate(33px, 66px);
    }
    64.5% {
        transform: translate(0, 66px);
    }
    75% {
        transform: translate(0, 66px);
    }
    77% {
        transform: translate(0, 33px);
    }
    87.5% {
        transform: translate(0, 33px);
    }
    89.5% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

// rotate

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