/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes spin
    0% 
        transform rotate(0deg)
    100%
        transform rotate(360deg)
    
// 旋转动画
.zSpin:before
    animation spin 0.8s linear infinite normal
    display inline-block

@keyframes shake 
    0%, 100% 
        transform translate3d(0, 0, 0)
    10%, 30%, 50%, 70%, 90% 
        transform translate3d(-10px, 0, 0)
    20%, 40%, 60%, 80% 
        transform translate3d(10px, 0, 0)
.zShake 
  animation-name shake
  animation-duration 1s

@keyframes fadeIn 
    0% 
        opacity 0
    100% 
        opacity 1
.zFadeIn 
    animation-name fadeIn
    animation-duration 0.3s

@keyframes fadeInDown 
    0% 
        opacity 0
        transform translate3d(0, -100%, 0)
    100% 
        opacity 1
        transform none
.zFadeInDown 
    animation-name fadeInDown
    animation-duration .3s

@keyframes fadeInLeft 
    0% 
        opacity 0
        transform translate3d(-100%, 0, 0)
    100% 
        opacity 1
        transform none
.zFadeInLeft 
    animation-name fadeInLeft
    animation-duration .3s

@keyframes fadeInRight 
    0% 
        opacity 0
        transform translate3d(100%, 0, 0)
    100% 
        opacity 1
        transform none
.zFadeInRight 
    animation-name fadeInRight
    animation-duration .3s

@keyframes fadeInUp 
    0% 
        opacity 0
        transform translate3d(0, 100%, 0)
    100% 
        opacity 1
        transform none
.zFadeInUp 
    animation-name fadeInUp
    animation-duration .3s

@keyframes fadeOut
    0% 
        opacity 1
    100% 
        opacity 0
.zFadeOut
    animation-name fadeOut
    animation-duration .3s

@keyframes fadeOutDown 
    0% 
        opacity 1
    100% 
        opacity 0
        transform translate3d(0, 100%, 0)
.zFadeOutDown 
    animation-name fadeOutDown
    animation-duration .3s

@keyframes fadeOutLeft
    0% 
        opacity 1
    100% 
        opacity 0
        transform translate3d(-100%, 0, 0)
.zFadeOutLeft
    animation-name fadeOutLeft
    animation-duration .3s

@keyframes fadeOutRight 
    0% 
        opacity 1
    100% 
        opacity 0
        transform translate3d(100%, 0, 0)
.zFadeOutRight 
    animation-name fadeOutRight
    animation-duration .3s

@keyframes fadeOutUp 
    0% 
        opacity 1
    100% 
        opacity 0
        transform translate3d(0, -100%, 0)
.zFadeOutUp 
    animation-name fadeOutUp
    animation-duration .3s

@keyframes zoomIn 
    0% 
        opacity 0
        transform scale3d(.3, .3, .3)
    50% 
        opacity 1
.zZoomIn 
    animation-name zoomIn
    animation-duration 0.3s
    
@keyframes zoomInDown 
    0%
        opacity 0
        transform scale3d(.1, .1, .1) translate3d(0, -1000px, 0)
        animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
    60% 
        opacity 1
        transform scale3d(.475, .475, .475) translate3d(0, 60px, 0)
        animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
.zZoomInDown 
    animation-name zoomInDown
    animation-duration 0.3s
    
@keyframes zoomInLeft 
    0% 
        opacity 0
        transform scale3d(.1, .1, .1) translate3d(-1000px, 0, 0)
        animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
    60% 
        opacity 1
        transform scale3d(.475, .475, .475) translate3d(10px, 0, 0)
        animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
.zZoomInLeft 
    animation-name zoomInLeft
    animation-duration 0.3s
    
@keyframes zoomInRight 
    0% 
        opacity 0
        transform scale3d(.1, .1, .1) translate3d(1000px, 0, 0)
        animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
    60%
        opacity 1
        transform scale3d(.475, .475, .475) translate3d(-10px, 0, 0)
        animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
.zZoomInRight
    animation-name zoomInRight
    animation-duration 0.3s
    
@keyframes zoomInUp 
    0% 
        opacity 0
        transform scale3d(.1, .1, .1) translate3d(0, 1000px, 0)
        animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
    60% 
        opacity 1
        transform scale3d(.475, .475, .475) translate3d(0, -60px, 0)
        animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
.zZoomInUp
    animation-name zoomInUp
    animation-duration 1s
    
@keyframes zoomOut 
    0% 
        opacity 1
    50% 
        opacity 0
        transform scale3d(.3, .3, .3)
    100% 
        opacity 0
.zZoomOut 
    animation-name zoomOut
    animation-duration 1s
    
@keyframes zoomOutDown 
    40% 
        opacity 1
        transform scale3d(.475, .475, .475) translate3d(0, -60px, 0)
        animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
    100% 
        opacity 0
        transform scale3d(.1, .1, .1) translate3d(0, 2000px, 0)
        transform-origin center bottom
        animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
.zZoomOutDown 
    animation-name zoomOutDown
    animation-duration 1s
    
@keyframes zoomOutLeft 
    40% 
        opacity 1
        transform scale3d(.475, .475, .475) translate3d(42px, 0, 0)
    100% 
        opacity 0
        transform scale(.1) translate3d(-2000px, 0, 0)
        transform-origin left center
.zZoomOutLeft 
    animation-name zoomOutLeft
    animation-duration 1s
    
@keyframes zoomOutRight 
    40% 
        opacity 1
        transform scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
    100% 
        opacity 0
        transform scale(.1) translate3d(2000px, 0, 0)
        transform-origin right center
.zZoomOutRight 
    animation-name zoomOutRight
    animation-duration 1s
    
@keyframes zoomOutUp 
    40% 
        opacity 1
        transform scale3d(.475, .475, .475) translate3d(0, 60px, 0)
        animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
    100% 
        opacity 0
        transform scale3d(.1, .1, .1) translate3d(0, -2000px, 0)
        transform-origin center bottom
        animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
.zZoomOutUp 
    animation-name zoomOutUp
    animation-duration 1s