css3动画抖动效果

深碍√TFBOYSˉ_ 2022-08-07 02:39 520阅读 0赞

html结构：

css样式：

.dd \{

animation: shake 1s;  
    -o-animation: shake 1s;  
    -webkit-animation: shake 1s;  
    -moz-animation: shake 1s;  
\}  
@keyframes shake \{  
    0%, 100% \{  
        -webkit-transform: translateX(0);  
    \}  
    10%,  
    30%,  
    50%,  
    70%,  
    90% \{  
        -webkit-transform: translateX(-5px);  
    \}  
    20%,  
    40%,  
    60%,  
    80% \{  
        -webkit-transform: translateX(5px);  
    \}  
\}  
@-o-keyframes shake \{  
    /\* Opera \*/  
    0%, 100% \{  
        -webkit-transform: translateX(0);  
    \}  
    10%,  
    30%,  
    50%,  
    70%,  
    90% \{  
        -webkit-transform: translateX(-5px);  
    \}  
    20%,  
    40%,  
    60%,  
    80% \{  
        -webkit-transform: translateX(5px);  
    \}  
\}  
@-webkit-keyframes shake \{  
    /\* Safari 和 Chrome \*/  
    0%, 100% \{  
        -webkit-transform: translateX(0);  
    \}  
    10%,  
    30%,  
    50%,  
    70%,  
    90% \{  
        -webkit-transform: translateX(-5px);  
    \}  
    20%,  
    40%,  
    60%,  
    80% \{  
        -webkit-transform: translateX(5px);  
    \}  
\}  
@-moz-keyframes shake \{  
    /\* Firefox \*/  
    0%, 100% \{  
        -moz-transform: translateX(0);  
    \}  
    10%,  
    30%,  
    50%,  
    70%,  
    90% \{  
        -moz-transform: translateX(-5px);  
    \}  
    20%,  
    40%,  
    60%,  
    80% \{  
        -moz-transform: translateX(5px);  
    \}

js效果：

效果：

![20150227165900068][]

鼠标经过home图标时，图标会左右晃动。

[20150227165900068]: /images/20220805/93168fb2a193425188b292a0dee89301.png