css3 抖动效果

梦里梦外; 2022-12-07 11:56 217阅读 0赞

.shaky { 
            -webkit-animation-name: shaky-slow;
            -ms-animation-name: shaky-slow;
            animation-name: shaky-slow;
            -webkit-animation-duration: 0.5s;
            -ms-animation-duration: 0.5s;
            animation-duration: 0.5s;
            -webkit-animation-iteration-count: 2;
            -ms-animation-iteration-count: 2;
            animation-iteration-count: 2;
            -webkit-animation-timing-function: ease-in-out;
            -ms-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-play-state: running;
            -ms-animation-play-state: running;
            animation-play-state: running;
        }
    @-webkit-keyframes shaky-slow { 
    	30% { 
    		-webkit-transform: translateY(10px);
    	}
    	60% { 
    	    -webkit-transform: translateY(-10px);
    	}
    	80% { 
    	          -webkit-transform: translateY(10px);
    	      }
    	100% { 
    	          -webkit-transform: translateY(0);
    	      }
    	80% { 
    	          -webkit-transform: translateY(10px);
    	      }
    	60% { 
    	          -webkit-transform: translateY(-10px);
    	      }
    	30% { 
    	          -webkit-transform: translateY(10px);
    	      }
    	  }
    // @-webkit-keyframes shaky-slow {   // 第二种效果 // 20% { 
    //       -webkit-transform: rotate(-0.5deg);
    //   }
    // 40% { 
    //       -webkit-transform: rotate(-0.5deg);
    //   }
    // 60% { 
    //       -webkit-transform: rotate(-0.5deg);
    //   }
    // 80% { 
    //       -webkit-transform: rotate(2deg);
    //   }
    // 90% { 
    //       -webkit-transform: rotate(-2deg);
    //   }
    // 100% { 
    //       -webkit-transform: rotate(0deg);
    //   }
    // }

<p class="shaky">文字文字文字</p>