小程序内左右抖动提示效果实现

今天在体验小程序开发群里一个朋友分享的小程序，有一点特别吸引用户

如下面截图

1

2

当我们点击手机号快捷登录时，如果用户未勾选底部的隐私政策，会触发该动画交互

也就是隐私政策这个地方会左右摇摆，也就是shake

3

这部分实现代码如下所示

.shake-horizontal {
    animation-delay: 0s;
    animation-duration: .1s;
    animation-iteration-count: infinite;
    animation-name: shake-horizontal;
    animation-play-state: running;
    animation-timing-function: ease-in-out;
}



@keyframes shake-horizontal {
    0% {
        transform: translate(0,0) rotate(0deg);
    }


    2% {
        transform: translate(-4px,0) rotate(0deg);
    }


    4% {
        transform: translate(2px,0) rotate(0deg);
    }


    6% {
        transform: translate(-3px,0) rotate(0deg);
    }


    8% {
        transform: translate(9px,0) rotate(0deg);
    }


    10% {
        transform: translate(2px,0) rotate(0deg);
    }


    12% {
        transform: translate(-6px,0) rotate(0deg);
    }


    14% {
        transform: translate(-7px,0) rotate(0deg);
    }


    16% {
        transform: translate(2px,0) rotate(0deg);
    }


    18% {
        transform: translate(7px,0) rotate(0deg);
    }


    20% {
        transform: translate(-1px,0) rotate(0deg);
    }


    22% {
        transform: translate(-10px,0) rotate(0deg);
    }


    24% {
        transform: translate(-10px,0) rotate(0deg);
    }


    26% {
        transform: translate(3px,0) rotate(0deg);
    }


    28% {
        transform: translate(-5px,0) rotate(0deg);
    }


    30% {
        transform: translate(4px,0) rotate(0deg);
    }


    32% {
        transform: translate(-6px,0) rotate(0deg);
    }


    34% {
        transform: translate(-2px,0) rotate(0deg);
    }


    36% {
        transform: translate(-6px,0) rotate(0deg);
    }


    38% {
        transform: translate(-2px,0) rotate(0deg);
    }


    40% {
        transform: translate(4px,0) rotate(0deg);
    }


    42% {
        transform: translate(8px,0) rotate(0deg);
    }


    44% {
        transform: translate(-3px,0) rotate(0deg);
    }


    46% {
        transform: translate(-10px,0) rotate(0deg);
    }


    48% {
        transform: translate(4px,0) rotate(0deg);
    }


    50% {
        transform: translate(-6px,0) rotate(0deg);
    }


    52% {
        transform: translate(6px,0) rotate(0deg);
    }


    54% {
        transform: translate(-8px,0) rotate(0deg);
    }


    56% {
        transform: translate(5px,0) rotate(0deg);
    }


    58% {
        transform: translate(9px,0) rotate(0deg);
    }


    60% {
        transform: translate(7px,0) rotate(0deg);
    }


    62% {
        transform: translate(1px,0) rotate(0deg);
    }


    64% {
        transform: translate(2px,0) rotate(0deg);
    }


    66% {
        transform: translate(-2px,0) rotate(0deg);
    }


    68% {
        transform: translate(-7px,0) rotate(0deg);
    }


    70% {
        transform: translate(-1px,0) rotate(0deg);
    }


    72% {
        transform: translate(-6px,0) rotate(0deg);
    }


    74% {
        transform: translate(5px,0) rotate(0deg);
    }


    76% {
        transform: translate(0,0) rotate(0deg);
    }


    78% {
        transform: translate(9px,0) rotate(0deg);
    }


    80% {
        transform: translate(-3px,0) rotate(0deg);
    }


    82% {
        transform: translate(8px,0) rotate(0deg);
    }


    84% {
        transform: translate(-2px,0) rotate(0deg);
    }


    86% {
        transform: translate(-1px,0) rotate(0deg);
    }


    88% {
        transform: translate(-3px,0) rotate(0deg);
    }


    90% {
        transform: translate(4px,0) rotate(0deg);
    }


    92% {
        transform: translate(0,0) rotate(0deg);
    }


    94% {
        transform: translate(4px,0) rotate(0deg);
    }


    96% {
        transform: translate(2px,0) rotate(0deg);
    }


    98% {
        transform: translate(-2px,0) rotate(0deg);
    }
}

5

6

7

8