定番
履歴

CSS3 やわらかい動き

CSS3 やわらかい動き
ポヨンと弾力のあるアニメーションの演出です。

CSSのアニメを使ってやわらかい表現を付加します。

表示時とクリックしたときに発動するサンプルです。

クラスを設定すれば、要素は画像でもSVGでも文字でも適用できます。

CSSは以下のように書きました

  <style>
    .poyon {
      animation: poyon 1.0s linear 0s ;
      cursor:pointer;
    }
    .demo_area{
      background-color: #CCC;
      width: 200px;
      height: 200px;
      margin: 20px;
    }

    @keyframes poyon {
      0%   { transform: scale(0.8, 1.4) translate(0%, -100%); }
      10%  { transform: scale(0.8, 1.4) translate(0%, -15%); }
      20%  { transform: scale(1.4, 0.6) translate(0%, 30%); }
      30%  { transform: scale(0.9, 1.1) translate(0%, -10%); }
      40%  { transform: scale(0.95, 1.2) translate(0%, -30%); }
      50%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
      60%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
      70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
      100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
    }
  </style>

クリックで発動するJSのサンプルはこちら

<script>
$(document).ready(function(){
  $(".poyon").on('click',function(){
    $(this).removeClass("poyon").delay(200).queue(function(next) {
    $(this).addClass('poyon');
    next();
    });
  });
});
</script>

HTMLはこちら

<div class="demo_area">
  <div class="poyon">
    <svg width=200 height=200 class="bg">
      <circle cx="100" cy="100" r="90" stroke="black" stroke-width="0" fill="#69F"/>
    </svg>
  </div>
</div>
2018-10-14 23:14:22
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top