CSS3のアニメーション機能のデモ

策定中の機能なので、-webkit-* や -moz-* のようなベンダープレフィックスをプロパティの行頭に付け足す必要があります。

※処理をかけすぎているためか、たまにこのページを開くとGoogleChromeの画面全体がバグることがある

変形効果 transform: ****

HTML内での座標はそのままなので、transformでの変形効果で平行移動や拡大などで周りの要素が動くことはありません。

translate(X, Y)

平行移動
translateX(X, Y)
translateY(X, Y)
scale (X, Y)

表示倍率変更
scaleX(X, Y)
scaleY(X, Y)
rotate(deg)

回転
skew(X, Y)

傾斜
skewX(X)
skewY(Y)
shorthand
stransform-origin:;

変形の基点を設定

状態遷移 transition: ****

遷移のイベント発火条件にマウスホバーを設定しています。

-webkit-transition-property:-webkit-transform;

遷移させるプロパティの指定 (none, all)
-webkit-transition-property:background-color;
-webkit-transition-delay:2s;

遷移の開始タイミングを遅延させる
-webkit-transition-duration:5s;

遷移にかける時間
-webkit-timing-function:ease-in-out;

遷移の変化の仕方
-webkit-transition-property:all;


  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>');
  });


});

  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;
}

/*
********************************
#transform
********************************
*/

#translate{
  -webkit-transform: translate(-40px, 40px);
  -moz-transform: translate(-40px, 40px);
  -o-transform: translate(-40px, 40px);
  -ms-transform: translate(-40px, 40px);
  transform: translate(-40px, 40px);
}
#translateX{
  -webkit-transform: translatex(-40px);
  -moz-transform: translatex(-40px);
  -o-transform: translatex(-40px);
  -ms-transform: translatex(-40px);
  transform: translatex(-40px);
}
#translateY{
  -webkit-transform: translatey(-40px);
  -moz-transform: translatey(-40px);
  -o-transform: translatey(-40px);
  -ms-transform: translatey(-40px);
  transform: translatey(-40px);
}
#scale{
  -webkit-transform:scale(1.4);
}
#scaleX{
  -webkit-transform:scaleX(1.4);
}
#scaleY{
  -webkit-transform:scaleY(1.4);
}
#rotate{
  -webkit-transform:rotate(45deg);
}
#skew{
  -webkit-transform:skew(15deg, 15deg);
}
#skewX{
  -webkit-transform:skewX(15deg);
}
#skewY{
  -webkit-transform:skewY(15deg);
}

#shorthand{
  transform: rotate(10deg) scale(1.2) skew(1deg) translate(-20px);
  -webkit-transform: rotate(10deg) scale(1.2) skew(1deg) translate(-20px);
  -moz-transform: rotate(10deg) scale(1.2) skew(1deg) translate(-20px);
  -o-transform: rotate(10deg) scale(1.2) skew(1deg) translate(-20px);
}

#origin{
  -webkit-transform-origin:right bottom;
  transform: rotate(10deg) scale(1.2) skew(1deg) translate(-20px);
  -webkit-transform: rotate(10deg) scale(1.2) skew(1deg) translate(-20px);
  -moz-transform: rotate(10deg) scale(1.2) skew(1deg) translate(-20px);
  -o-transform: rotate(10deg) scale(1.2) skew(1deg) translate(-20px);
}


/*
********************************
#transition
********************************
*/
#transition #transition_translate{
  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
}
#transition #transition_translate:hover{
  background-color:#bbbbbb;
  -webkit-transform:translate(160px);
}


#transition #transition_background{
  -webkit-transition-property:background-color;
  -webkit-transition-duration:2s;
  background-color:#ff6666;
}
#transition #transition_background:hover{
  background-color:#6666ff;
}

#transition #transition_delay{
  -webkit-transition-property:-webkit-transform;
  -webkit-transition-duration:1s;
  -webkit-transition-delay:1s;
}
#transition #transition_delay:hover{
  -webkit-transform:translate(160px);
}


#transition #transition_duration{
  -webkit-transition-property:-webkit-transform;
  -webkit-transition-duration:5s;
}
#transition #transition_duration:hover{
  -webkit-transform:translate(160px);
}



#transition #transition_timing-function{
  -webkit-transition-property:-webkit-transform;
  -webkit-transition_timing-function:easy-in-out;
  -webkit-transition-duration:5s;
}
#transition #transition_timing-function:hover{
  -webkit-transform:translate(80px);
}

#transition #transition_all{
  -webkit-transition-property:all;
  -webkit-transition_timing-function:easy-in-out;
  -webkit-transition-duration:5s;
}
#transition #transition_all:hover{
  -webkit-transform:translate(80px);
  opacity:0.6;
  border:4px solid #0000ff;
  background-color:#ff0000;
}



  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-css/css3-transition/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。