1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.share-prompt-wrap .share-prompt-arrow{
    width: 0.573rem;
    -webkit-animation-duration:3s;
    animation-duration:3s;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    -webkit-animation-name:share-prompt-animation;
    animation-name:share-prompt-animation;
    -webkit-animation-timing-function:ease-in-out;
    animation-timing-function:ease-in-out;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

@-webkit-keyframes share-prompt-animation {
    0% {
        -webkit-transform: none;
        transform: none;
    }
    50% {
        -webkit-transform: none;
        transform: none;
    }
    61% {
        -webkit-transform: translate3d(0, 0, 0) ;
        transform: translate3d(0, 0, 0) ;
    }
    70% {
        -webkit-transform:  translate3d(150%, -150%, 0) ;
        transform: translate3d(150%, -150%, 0) ;
    }
    71% {
        -webkit-transform: translate3d(300%, 0, 0);
        transform: translate3d(300%, 0, 0);
    }
    72% {
        -webkit-transform: translate3d(0, 300%, 0);
        transform: translate3d(0, 300%, 0);
    }
    73% {
        -webkit-transform: translate3d(-120%, 120%, 0);
        transform: translate3d(-120%, 120%, 0) ;
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0) ;
    }
}
@keyframes share-prompt-animation {
    0% {
        -webkit-transform: none;
        transform: none;
    }
    50% {
        -webkit-transform: none;
        transform: none;
    }
    61% {
        -webkit-transform: translate3d(0, 0, 0) ;
        transform: translate3d(0, 0, 0) ;
    }
    70% {
        -webkit-transform:  translate3d(150%, -150%, 0) ;
        transform: translate3d(150%, -150%, 0) ;
    }
    71% {
        -webkit-transform: translate3d(300%, 0, 0);
        transform: translate3d(300%, 0, 0);
    }
    72% {
        -webkit-transform: translate3d(0, 300%, 0);
        transform: translate3d(0, 300%, 0);
    }
    73% {
        -webkit-transform: translate3d(-120%, 120%, 0);
        transform: translate3d(-120%, 120%, 0) ;
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0) ;
    }

}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.shake-welfare {
    -webkit-animation-duration:1.5s;
    animation-duration:1.5s;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    -webkit-animation-name:get-welfare-animation;
    animation-name:get-welfare-animation;
    -webkit-animation-timing-function:ease-in-out;
    animation-timing-function:ease-in-out;
    /*-webkit-transition-delay:2s;
    transition-delay:2s;*/
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

@-webkit-keyframes get-welfare-animation {
    0% {
        -webkit-transform: none;
        transform: none;
    }
    66% {
        -webkit-transform: none;
        transform: none;
    }

    69% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    72% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    75% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    78% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    81% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
    84% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    87% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    90% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    93% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    95% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes get-welfare-animation {
    0% {
        -webkit-transform: none;
        transform: none;
    }
    66% {
        -webkit-transform: none;
        transform: none;
    }
    69% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    72% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    75% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    78% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    81% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
    84% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    87% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    90% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    93% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    95% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}