2019年11月07日(木)

CSS transition-duration プロパティ

transition-duration（トランジション・デュレーション） プロパティは、変化が始まって終わるまでの時間を指定します。

transition-duration（トランジション・デュレーション） プロパティ使いさまざまな時間の動きの違いを確認しましょう。

<ul class="ulBox">
<li class="animeA">animeA</li>
<li class="animeB">animeB</li>
<li class="animeC">animeC</li>
</ul>

.ulBox {
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
  }

.animeA, .animeB, .animeC {
  width: 100px;
  height: 50px;
  background-color: #c00;
  transition-property: all;
  transition-delay: 0s;
  transition-timing-function: ease;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  font-size: 1.6rem;
  }

.animeA { transition-duration: 500ms;}
.animeB { transition-duration: 2s;}
.animeC { transition-duration: 100ms;}
 
.animeA:hover {
  background-color: #00c;
  color: #000;
  width: 200px;
  }

.animeB:hover {
  background-color: #00c;
  color: #000;
  width: 200px;
  }

.animeC:hover {
  background-color: #00c;
  color: #000;
  width: 200px;
  }

下の三つのバーの動きの違いを確認してください。