「ふんわりと色を変えることができるtransitionプロパティ」の編集履歴（バックアップ）一覧に戻る

ふんわりと色を変えることができるtransitionプロパティ - (2015/06/28 (日) 22:19:35) のソース

このページでは、transitionプロパティとtransformプロパティについて解説していきます。~
目次
#contents
*transitionの基本
transitionプロパティはちょっとした動作を伴うので、みなさんも是非コードを実際に書きながら確認して進んでみてください！！~
以下の画像をご覧ください。~
#image(width=300,transition_sample1.png)
例えば、赤いボックス(左)をホバーした時に緑色に変化させる事は疑似要素を使う事によって実現できますね。~
さて、transitionプロパティを使用する事によって&color(red){変化途中、どのように変化していくのか？}を指定する事ができます。~
それではコードを書いてみましょう。~
HTML
 <div id="transition_sample">
   <p>transitionの解説</p>
 </div>
CSS
 #transition_sample {
   height: 200px;
   width: 200px;
   border: 2px solid #333;
   background-color: #ff0000;
 }
 #transition_sample:hover {
   transition: background-color 1s 1s ease-out;
   background-color: #00ff00;
 }
~
お！！ってなりますね(笑)~
それでは解説していきます。~
まず、一つのboxを用意します。~
次にhoverした後の記述も先にしておきましょう。~
最後に
 transition: background-color 1s 1s ease-out
の一行を加えます。~
この一行を加えるだけなので、この一行の意味を解説していきますね。~
この一行は以下のように書き換える事ができます。
 /*transitionを適用するプロパティを指定しています*/
 transition-property: background-color;
 /*マウスをhoverしてから何秒後にtransitionを実行するのかを指定しています*/
 transition-delay: 1s;
 /*transitionを何秒間かけて実行するかを指定しています*/
 transition-duration: 1s;
 /*transitionをどのように実行するかを指定しています(どのように変化するか)*/
 transition-timing-function: ease-out
この五行をひとつにまとめた形を一行で記述したのです。~



*transitionを使ったサンプル

*transformの基本

*transformを使ったサンプル