kingdot/src/styles/common/motion/swing.styl

A UI Components Library For Vue

swing-motion($className, $keyframeName)
    .{$className}-enter, .{$className}-appear
        motion-common()
        animation-play-state paused
    .{$className}-enter.{$className}-enter-active, .{$className}-appear.{$className}-appear-active
        animation-name s('%sIn', $keyframeName)
        animation-play-state running
swing-motion(swing, kdSwing)
@keyframes kdSwingIn
    0%, 100%
        transform translateX(0)
    20%
        transform translateX(-10px)
    40%
        transform translateX(10px)
    60%
        transform translateX(-5px)
    80%
        transform translateX(5px)