/home/mobivsrd/public_html/wp-contentMXc/themes/freeio/sass/template/_theme-effect.scss
// zoom
.effect-1{
    position:relative;
    &:after{
        content: '';
        display: block;
        @include size(0px,1px);
        @include transition(all 0.3s ease 0s);
        left:0;
        bottom:0;
        right:0;
        background:transparent;
        margin:auto;
    }
    &:hover{
        &:after{
            @include size(100%,1px);
            background:$theme-color;
        }
    }
}
.zoom-2{
    overflow: hidden;
    display: block;
    @include border-radius(3px);
    img{
        position: relative;
        width: percentage(1);
        height: auto;
        @include transition(all .2s ease-out);
    }
    &:hover{
        img{
            @include scale(1.2);
        }
    }
}

.close{ 
    .fa{
        @include transition(all 1s ease-in-out);
    }
    &:hover{
        .fa{
            @include rotate(360deg);
        }
    }
}

.image-overlay-1{
    &:after,&:before{
        content:"";
        display: block;
        position: absolute;
        z-index: 100;
        background: rgba($black,.7);
        @include size(percentage(1),percentage(1));
        left: 0;
        @include opacity(0);
        @include transition(all 0.3s ease 0s);
    }
    &:after{
        top: -100%;
    }
    &:before{
        bottom: -100%;
    }
    &:hover{
        &:after{
            top: -50%;
            @include opacity(1);
        }
        &:before{
            bottom: -50%;
            @include opacity(1);
        }
    }
}


@keyframes scale {
  0% {
    @include opacity(0);
    @include transform( scale(0.8) translateY(50px) );
      transition-property: opacity, transform;

      transition-duration: 1.2s;
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    @include transform(none);
    @include opacity(1);
  }
}
@-webkit-keyframes scale {
  0% {
      @include opacity(0);
      @include transform( scale(0.8) translateY(50px) );
      transition-property: opacity, transform;

      transition-duration: 1.2s;
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
      @include transform(none);
      @include opacity(1);

  }
}

@-webkit-keyframes fancy{
  0% {
    @include opacity(0);
    @include transform( translateY(110px) rotateY(20deg) );
    transform-origin: left;
    transition-property: opacity, transform;
    transition-duration: 1.2s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    @include transform(none);
    @include opacity(1);
  }
}

@keyframes fancy{
  0% {
    @include opacity(0);
    @include transform( translateY(110px) rotateY(20deg) );
    transform-origin: left;
    transition-property: opacity, transform;
    transition-duration: 1.2s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    @include transform(none);
    @include opacity(1);
  }
}

@-webkit-keyframes slide-up{
  0% {
    @include translate3d(0, 3rem, 0);
    @include opacity(0);
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    @include opacity(1);
    @include translate3d(0, 0, 0);
  }
}

@keyframes slide-up{
  0% {
    @include translate3d(0, 3rem, 0);
    @include opacity(0);
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    @include opacity(1);
    @include translate3d(0, 0, 0);
  }
}

@-webkit-keyframes slide-left {
  0% {
    @include translate3d(3rem, 0, 0);
    @include opacity(0);
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    @include opacity(1);
    @include translate3d(0, 0, 0);
  }
}

@keyframes slide-left {
  0% {
    @include translate3d(3rem, 0, 0);
    @include opacity(0);
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    @include opacity(1);
    @include translate3d(0, 0, 0);
  }
}

@-webkit-keyframes slide-right {
  0% {
    @include translate3d(-3rem, 0, 0);
    @include opacity(0);
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    @include opacity(1);
    @include translate3d(0, 0, 0);
  }
}

@keyframes slide-right {
  0% {
    @include translate3d(-3rem, 0, 0);
    @include opacity(0);
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    @include opacity(1);
    @include translate3d(0, 0, 0);
  }
}

@-webkit-keyframes slide-down {
  0% {
    @include translate3d(0, -3rem, 0);
    @include opacity(0);
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    @include opacity(1);
    @include translate3d(0, 0, 0);
  }
}

@keyframes slide-down {
  0% {
    @include translate3d(0, -3rem, 0);
    @include opacity(0);
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    @include opacity(1);
    @include translate3d(0, 0, 0);
  }
}

.scale{
  animation-name: scale;
}
.fancy{
  animation-name: fancy;
}
.slide-up{
  animation-name: slide-up;
}
.slide-left{
  animation-name: slide-left;
}
.slide-right{
  animation-name: slide-right;
}
.slide-down{
  animation-name: slide-down;
}
.delay-1{
  transition-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.delay-2{
  transition-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.delay-3{
  transition-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
Path: home/mobivsrd/public_html/wp-contentMXc/themes/freeio/sass/template