transition:変化時間

実行結果

下のオレンジ色の部分をマウスが通過すると変形します。

下の図形です。

マウスが通ると長方形がゆっくり縮みます。
transitionで形をゆっくり変えることができます。
allは全て,2sは2秒間で動きます。
ease-in-outはease-inとease-out両方で始めと終わりをよりゆっくりにします。ease

プログラム

  

  HTML
  
  <div class="box">div class="box"</div>
  <!--形の元です。boxという名前を付けます。-->
  

  /*CSS*/
  .box{
    width: 250px;/*横幅を与えます。*/
    height: 200px;/*高さを決めます。*/
    background-color: #f88;/*オレンジ色にしました。*/
    transition:all 2s ease-in-out;
    /*2秒かけて始と終わりはゆっくり移動します。*/
  }
  .box:hover{/*マウスがboxの上を通過する時*/
      width: 100px;/*横幅を100pxにします。*/
  }

マウスが通ると長方形が縮みます。

---

考察

transitionを使って,時間をかけて変化させるとアニメ感が出ます。

応用編

実行結果

transition:は縦横の長さの他,マージンや色などにも働きます。

中間色も出ていますね。ふちを押すように変形させることもできます。

プログラム

HTML

<div class="box2"></div>div class="box2"<!--形の元です。box2という名前を付けます。-->

---

/*CSS*/
.box2{
width: 250px;
height: 200px;
background-color: #f88;*/
transition:all 2s ease-in-out;/*2秒かけて始と終わりはゆっくり移動します。*/
}

.box2:hover{
width: 100px;
height: 150px;/*高さを150pxにします。*/
background-color: #88f;/*空色にします。*/
}

いろいろな応用が考えられます。