관리-도구

편집 파일: css3_animations.less

/* CSS Animations */
.wpb_animate_when_almost_visible {
  .opacity(0);
}

.wpb_animate_when_almost_visible:not(.wpb_start_animation) {
  .animation(none)
}

.wpb_top-to-bottom, .top-to-bottom {
  .animation(wpb_ttb 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275));
}

.wpb_bottom-to-top, .bottom-to-top {
  .animation(wpb_btt 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275));
}

.wpb_left-to-right, .left-to-right {
  .animation(wpb_ltr 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275));
}

.wpb_right-to-left, .right-to-left {
  .animation(wpb_rtl 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275));
}

.wpb_appear, .appear {
  .animation(wpb_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275));
  .scale(1);
}

.wpb_start_animation {
  .opacity(1);
}

/* Top to bottom keyframes */
@-webkit-keyframes wpb_ttb {
  0% {
    -webkit-transform: translate(0, -10%);
    .opacity(0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    .opacity(1);
  }
}

@-moz-keyframes wpb_ttb {
  0% {
    -moz-transform: translate(0, -10%);
    .opacity(0);
  }
  100% {
    -moz-transform: translate(0, 0);
    .opacity(1);
  }
}

@-o-keyframes wpb_ttb {
  0% {
    -o-transform: translate(0, -10%);
    .opacity(0);
  }
  100% {
    -o-transform: translate(0, 0);
    .opacity(1);
  }
}

@keyframes wpb_ttb {
  0% {
    .translate(0, -10%);
    .opacity(0);
  }
  100% {
    .translate(0, 0);
    .opacity(1);
  }
}

/* Bottom to top keyframes */
@-webkit-keyframes wpb_btt {
  0% {
    -webkit-transform: translate(0, 10%);
    .opacity(0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    .opacity(1);
  }
}

@-moz-keyframes wpb_btt {
  0% {
    -moz-transform: translate(0, 10%);
    .opacity(0);
  }
  100% {
    -moz-transform: translate(0, 0);
    .opacity(1);
  }
}

@-o-keyframes wpb_btt {
  0% {
    -o-transform: translate(0, 10%);
    .opacity(0);
  }
  100% {
    -o-transform: translate(0, 0);
    .opacity(1);
  }
}

@keyframes wpb_btt {
  0% {
    .translate(0, 10%);
    .opacity(0);
  }
  100% {
    .translate(0, 0);
    .opacity(1);
  }
}

/* Left to right keyframes */
@-webkit-keyframes wpb_ltr {
  0% {
    -webkit-transform: translate(-10%, 0);
    .opacity(0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    .opacity(1);
  }
}

@-moz-keyframes wpb_ltr {
  0% {
    -moz-transform: translate(-10%, 0);
    .opacity(0);
  }
  100% {
    -moz-transform: translate(0, 0);
    .opacity(1);
  }
}

@-o-keyframes wpb_ltr {
  0% {
    -o-transform: translate(-10%, 0);
    .opacity(0);
  }
  100% {
    -o-transform: translate(0, 0);
    .opacity(1);
  }
}

@keyframes wpb_ltr {
  0% {
    .translate(-10%, 0);
    .opacity(0);
  }
  100% {
    .translate(0, 0);
    .opacity(1);
  }
}

/* Right to left keyframes */
@-webkit-keyframes wpb_rtl {
  0% {
    -webkit-transform: translate(10%, 0);
    .opacity(0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    .opacity(1);
  }
}

@-moz-keyframes wpb_rtl {
  0% {
    -moz-transform: translate(10%, 0);
    .opacity(0);
  }
  100% {
    -moz-transform: translate(0, 0);
    .opacity(1);
  }
}

@-o-keyframes wpb_rtl {
  0% {
    -o-transform: translate(10%, 0);
    .opacity(0);
  }
  100% {
    -o-transform: translate(0, 0);
    .opacity(1);
  }
}

@keyframes wpb_rtl {
  0% {
    .translate(10%, 0);
    .opacity(0);
  }
  100% {
    .translate(0, 0);
    .opacity(1);
  }
}

/* Appear from center keyframes */
@-webkit-keyframes wpb_appear {
  0% {
    -webkit-transform: scale(0.5);
    .opacity(0.1);
  }
  100% {
    -webkit-transform: scale(1);
    .opacity(1);
  }
}

@-moz-keyframes wpb_appear {
  0% {
    -moz-transform: scale(0.5);
    .opacity(0.1);
  }
  100% {
    -moz-transform: scale(1);
    .opacity(1);
  }
}

@-o-keyframes wpb_appear {
  0% {
    -o-transform: scale(0.5);
    .opacity(0.1);
  }
  100% {
    -o-transform: scale(1);
    .opacity(1);
  }
}

@keyframes wpb_appear {
  0% {
    .scale(0.5);
    .opacity(0.1);
  }
  100% {
    .scale(1);
    .opacity(1);
  }
}

.vc-spinner {
  &::before {
    content: '';
    width: 16px;
    height: 16px;
    display: inline-block;
    pointer-events: none;
    margin-top: 6px;
    background: url('../images/spinner.gif') no-repeat;
    background-position-x: center;
    background-position-y: center;
  }
  &.vc-spinner-complete {
    &::before {
      background-image: url('../vc/tick.png');
    }
  }
  &.vc-spinner-failed {
    &::before {
      background-image: url('../vc/remove.png');
    }
  }
}