[data-pw-animation].pw-having-animation {
     &.pw-anim-fade-in,
     &.pw-anim-slide-from-top,
     &.pw-anim-slide-from-right,
     &.pw-anim-slide-from-bottom,
     &.pw-anim-slide-from-left,
     &.animated[data-pw-animation*="In"] {
        visibility: hidden;
        opacity: 0;
    }
}


.pw-having-animation {
    $animationDelay: 0.25s;

    @include animation-delay($animationDelay);

     &:not(.pw-anim-result) {
        // Resets animation so it can be played again
        @include animation-name(unquote("none"));

         &.pw-anim-fade-in,
         &.pw-anim-slide-from-top,
         &.pw-anim-slide-from-right,
         &.pw-anim-slide-from-bottom,
         &.pw-anim-slide-from-left,
         &.animated[class*="In"] {
            visibility: hidden;
            opacity: 0;
        }
    }

     &.pw-anim-fade-in,
     &.pw-anim-slide-from-top,
     &.pw-anim-slide-from-right,
     &.pw-anim-slide-from-bottom,
     &.pw-anim-slide-from-left {
        @include animation-duration(1.5s);
        @include animation-timing-function(unquote("ease-out"));
        @include animation-fill-mode(unquote("both"));

        // for smooth animations on iPhone:
        // http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
        @include perspective(1000);
        @include backface-visibility(unquote("hidden"));
    }

     &.pw-anim-fade-in {
        @include animation-timing-function(unquote("ease"));
    }

     &[data-pw-animation-duration="0.5s"]  { @include animation-duration(0.5s);  }
     &[data-pw-animation-duration="1s"]    { @include animation-duration(1s);    }
     &[data-pw-animation-duration="1.5s"]  { @include animation-duration(1.5s);  }
     &[data-pw-animation-duration="2s"]    { @include animation-duration(2s);    }
     &[data-pw-animation-duration="2.5s"]  { @include animation-duration(2.5s);  }

     &[data-pw-animation-delay="0.5s"]  { @include animation-delay($animationDelay + 0.5s);  }
     &[data-pw-animation-delay="1s"]    { @include animation-delay($animationDelay + 1s);    }
     &[data-pw-animation-delay="1.5s"]  { @include animation-delay($animationDelay + 1.5s);  }
     &[data-pw-animation-delay="2s"]    { @include animation-delay($animationDelay + 2s);    }
     &[data-pw-animation-delay="2.5s"]  { @include animation-delay($animationDelay + 2.5s);  }
     &[data-pw-animation-delay="3s"]    { @include animation-delay($animationDelay + 3s);    }
     &[data-pw-animation-delay="3.5s"]  { @include animation-delay($animationDelay + 3.5s);  }
     &[data-pw-animation-delay="4s"]    { @include animation-delay($animationDelay + 4s);    }
     &[data-pw-animation-delay="4.5s"]  { @include animation-delay($animationDelay + 4.5s);  }
     &[data-pw-animation-delay="5s"]    { @include animation-delay($animationDelay + 5s);    }

     &.alternate {
        @include animation-direction(unquote("alternate"));
    }
}


.pw-having-animation.pw-anim-result {
     &.pw-anim-fade-in           { @include animation-name(unquote("frAnimFadeIn"));          }
     &.pw-anim-slide-from-top    { @include animation-name(unquote("frAnimSlideFromTop"));    }
     &.pw-anim-slide-from-right  { @include animation-name(unquote("frAnimSlideFromRight"));  }
     &.pw-anim-slide-from-bottom { @include animation-name(unquote("frAnimSlideFromBottom")); }
     &.pw-anim-slide-from-left   { @include animation-name(unquote("frAnimSlideFromLeft"));   }
}


// WEAVER Editor specific
.not-in-preview .pw-having-animation.infinite {
    @include animation-iteration-count(unquote("3"));
}


@-webkit-keyframes frAnimFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes frAnimFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}


@-webkit-keyframes frAnimSlideFromTop {
    from { opacity: 0;  @include transform(unquote("translateY(-20px)")); }
    to   { opacity: 1;  @include transform(unquote("translateY(0)"));     }
}

@keyframes frAnimSlideFromTop {
    from { opacity: 0;  @include transform(unquote("translateY(-20px)")); }
    to   { opacity: 1;  @include transform(unquote("translateY(0)"));     }
}


@-webkit-keyframes frAnimSlideFromRight {
    from { opacity: 0;  @include transform(unquote("translateX(20px)")); }
    to   { opacity: 1;  @include transform(unquote("translateX(0)"));     }
}

@keyframes frAnimSlideFromRight {
    from { opacity: 0;  @include transform(unquote("translateX(20px)")); }
    to   { opacity: 1;  @include transform(unquote("translateX(0)"));     }
}


@-webkit-keyframes frAnimSlideFromBottom {
    from { opacity: 0;  @include transform(unquote("translateY(20px)")); }
    to   { opacity: 1;  @include transform(unquote("translateY(0)"));     }
}

@keyframes frAnimSlideFromBottom {
    from { opacity: 0;  @include transform(unquote("translateY(20px)")); }
    to   { opacity: 1;  @include transform(unquote("translateY(0)"));     }
}


@-webkit-keyframes frAnimSlideFromLeft {
    from { opacity: 0;  @include transform(unquote("translateX(-20px)")); }
    to   { opacity: 1;  @include transform(unquote("translateX(0)"));      }
}

@keyframes frAnimSlideFromLeft {
    from { opacity: 0;  @include transform(unquote("translateX(-20px)")); }
    to   { opacity: 1;  @include transform(unquote("translateX(0)"));      }
}