よくあるCSS点賛アニメーション効果

CSS 3によるアニメーション効果の実現
使用法

まず、アニメーションスタイル

を定義します.

次にクラス名を定義定義定義定義されたアニメーションを

に割り当てます.

必要に応じてノードにクラス名

を追加できます.
注意:以上は、アニメに基础がある人は、基础がなければ心配しないでください.菜鸟教程の授业を参考にして、自分で勉强してもいいですよ.
例1:クリック拡大縮小

***~~~~html~~~~***  

 <div onclick="thumpDown" class="{{ClickStatus?'animate':''}}"></div>
 
 ***~~      ~~*** 
 .animate {
        animation: scaleDraw 1s ease-in-out;
    }
  /*        */
  @keyframes scaleDraw{
    0% {
           transform: scale(1);  /*       */
    }
    25% {
          transform: scale(1.1); /*  1.1 */
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.1);
    }
   
  }

例2:バブルフローティングをクリック

*****    *********

@keyframes Clickfd {
    0% {
        top:0px; 
    }
    10% {
        top:-3px; 
    }
    20% {
        top:-6px; 
    }
    30% {
        top:-9px; 
    }
    40% {
        top:-12px; 
        transform: rotate(6deg);
    }
    50% {
        top:-15px; 
        transform: rotate(12deg);
    }
    60% {
        top:-18px; 
        transform: rotate(6deg);
    }
    70% {
        top:-21px;
        transform: rotate(0deg);
    }
    80% {
        top:-24px;
        transform: rotate(-6deg);
    }
    90% {
        top:-27px;
        transform: rotate(-12deg);
    }
    100% {
        top:-30px;
        transform: rotate(-6deg);
    }
}

コメント:以上は简単な2つの简単なアニメーション効果で、その后良いアニメーション効果が更新され続けます~