CSS3の繰り返しアニメーション機能のデモ

繰り返し遷移 animation: ****

animation-name:****;でキーフレームの名前に関連付けし、キーフレーム @keyframes ****{}内で各タイミングのスタイルを設定する。

transitionと違い、繰り返しアニメーションさせたり、永続的に続けることも可能です。

  1. translate 上下左右に移動させる
  2. rotate
  3. scale 拡大縮小
  4. rotate2 回転で元に戻る
  5. opacity colorは有効。 -webkit-gradientは無効。
  6. contentでの文字の内容を変更は無効。

JavaScriptと組み合わせてEventタイミングやclass属性を操作

各ブロックをクリックしてください。

  1. transitionが設定されたclassを加える (拡大後、カクカクとフォントサイズが揺れるバグあり)

  2. transitionが webkitTransitionEnd した時点で別のイベントを起動する

  3. addClass(), removeClass()をメソッドチェーンでつなげても、アニメは繋がらない

  4. JavaScriptから直接プロパティを指定

    jQuery css({})

  5. repeat

    スマートフォンだとanimationが自動で始まらないので、JavaScript側で起動と繰り返し処理を扱う。

はねるキャラ

view source

JavaScript

/*!
 * hi0a.com
 * Copyright 2010- by t_hida All rights Reserved.
 */
$(function(){
  var lis = $('ol li');
  lis.each(function(i){
    var j = i +1;
    $(this).prepend('<b>' + j + '</b>');
  });
  var target = $('#addJavaScript li');
  target.filter(':nth-child(1)').append('click!').click(function(){
      $(this).toggleClass('anime');
  });
  target.filter(':nth-child(2)').append('click!').click(function(){
    $(this).addClass('anime').bind("webkitTransitionEnd",function(){
        $(this).removeClass('anime');
    });
  });
  target.filter(':nth-child(3)').append('click!').addClass('anime').bind("webkitTransitionEnd",function(){
    $(this).removeClass('anime').bind("webkitTransitionEnd",function(){
    //  $(this).addClass('anime');
    });
  });
/*
  target.filter(':nth-child(4)').append('click!').click(function(){
      $(this).addClass('anime').removeClass('anime');
  });
  target.filter(':nth-child(4)').append('click!').click(function(){
    $(this).addClass('anime').bind("webkitTransitionEnd",function(){
      $(this).removeClass('anime').css({
        '-webkit-transform' : 'translate(20px) scale(0.6) rotate(30deg)'
      });
    });
  });
*/

/*
  (function repeat(){
    target.filter(':nth-child(5)').addClass('anime_slow').bind("webkitTransitionEnd",function(){
      $(this).addClass('anime_end').bind("webkitTransitionEnd",function(){
        $(this).removeClass('anime_slow').removeClass('anime_end');
        repeat();
      });
    });
  })();
*/
});

CSS

h2{
  margin:40px 0px;
}

ol:after{
  content:"";
  display:block;
  clear:both;
}
ol li{
  border:1px solid #000000;
  width:140px;
  height:140px;
  background-color:#999999;
  margin:10px;
  float:left;
  fonxt-size:12px;
}
ol li b{
  display:block;
  width:20px;
  height:20px;
  line-height:20px;
  text-align:center;
  color:#ffffff;
  background-color:#555555;
}


/*
********************************
#animation
********************************
*/

@-webkit-keyframes move{
  25%{
    -webkit-transform:translate(120px, 0px);
    -moz-transform:translate(120px, 0px);
    -o-transform:translate(120px, 0px);
    transform:translate(120px, 0px);
  }
  50%{
    -webkit-transform:translate(120px, 120px);
    -moz-transform:translate(120px, 120px);
    -o-transform:translate(120px, 120px);
    transform:translate(120px, 120px);
  }
  75%{
    -webkit-transform:translate(0px, 120px);
    -moz-transform:translate(0px, 120px);
    -o-transform:translate(0px, 120px);
    transform:translate(0px, 120px);
  }
  100%{
    -webkit-transform:translate(0px, 120px);
    -moz-transform:translate(0px, 120px);
    -z-transform:translate(0px, 120px);
    transform:translate(0px, 120px);
  }
}


#animation ol li:nth-child(1){
  -webkit-animation-name: move;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: move;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
}

@-webkit-keyframes move{
  25%{
    -webkit-transform:translate(40px, 0px);
  }
  50%{
    -webkit-transform:translate(40px, 40px);
  }
  75%{
    -webkit-transform:translate(0px, 40px);
  }
  100%{
    -webkit-transform:translate(0px, 0px);
  }
}

#animation ol li:nth-child(2){
  -webkit-animation-name:rotate;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
}
@-webkit-keyframes rotate{
/*
  25%{
    -webkit-transform:rotate(90deg);
  }
  50%{
    -webkit-transform:rotate(180deg);
  }
  75%{
    -webkit-transform:rotate(240deg);
  }
*/
  100%{
    -webkit-transform:rotate(360deg);
  }
}

#animation ol li:nth-child(3){
  -webkit-animation-name:scale;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
}
@-webkit-keyframes scale{
  100%{
    -webkit-transform:scale(.1);
  }
}



#animation ol li:nth-child(4){
  -webkit-animation-name:other;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes other{
  25%{
    opacity:0.6;
  }
  50%{
    -webkit-transform:rotate(240deg);
  }
  100%{
  }
}


#animation ol li:nth-child(5){
  -webkit-animation-name:opacity;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes opacity{
  25%{
    opacity:0.1;
    background:-webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#ffaaaa),
      to(#ffffff)
    );
  }
  50%{
    opacity:0.9;
    background-color:#aaaaff;
  }
  100%{
    background:-webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#ffffff),
      to(#ffaaaa)
    );
  }
}




#animation ol li:nth-child(6){
  -webkit-animation-name:text_edit;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes text_edit{
  25%{
    content:"aaaa";
    text-shadow:4px 4px 4px #000000;
    text-indent:1em;
    line-height:1.5em;
    box-shadow:4px 4px 4px 4px #000000;
  }
  50%{
    content:"bbbb";
  }
  100%{
    content:"cccc";
  }
}




/*
********************************
#addJavaScript
********************************
*/

#addJavaScript li.anime{
  -webkit-animation-name:move;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-function:ease-in;
}

#addJavaScript li.anime_slow{
  -webkit-transition-property:-webkit-transform;
  -webkit-transition-duration:3000ms;
  -webkit-transition-function:ease-in;
  -webkit-transform:scale(1.8);
}
#addJavaScript li.anime_end{
  -webkit-transition-property:-webkit-transform;
  -webkit-transition-duration:3000ms;
  -webkit-transition-function:ease-out;
  -webkit-transform:scale(1);
}




/*
********************************
pop
********************************
*/
#pop{
  margin-top:200px;
  -webkit-animation-name:pop;
  -webkit-animation-property:-webkit-transform;
  -webkit-animation-duration:500ms;
  -webkit-animation-timing-function:ease-out;
  -webkit-animation-iteration-count:infinite;
  -webkit-transform-origin:center bottom;
}
@-webkit-keyframes pop{
  0%{
  }
  25%{
    -webkit-transform:scale(.8,1.6);
  }
  100%{
    -webkit-transform:scaleX(1.2,.5);
  }
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-css/css3-transition-animation/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。