2019年11月07日(木)

• HTML入門
• Web
• HTML
• css

 CSS transition-delay プロパティ

transition-delay（トランジション・ディレイ）プロパティは、変化が始まるまでの待ち時間を指定します。

transition-delay（トランジション・ディレイ）プロパティ使いさまざまな開始時間の違いを確認しましょう。

<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;
  padding: 10px 0px 0px 0px;
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
  }

.animeA { transition-delay: 0; transition-duration: 500ms;}
.animeB { transition-delay: 1s; transition-duration: 2s;}
.animeC { transition-delay: 500ms; 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;
  }

下の三つのバーの動きの始まる時間の違いを確認してください。

• animeA
• animeB
• animeC

変化の開始時間を変えて動きをつける。

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

.animeD {
  width: 100px;
  height: 100px;
  background-color: #c00;
  transition-property: all;
  transition-delay: 0s;
  transition-timing-function: ease;
  text-align: center;
  padding: 40px 0px 0px 0px;
  color: #fff;
  font-size: 1.6rem;
  transition-duration: 500ms, 500ms, 500ms;
  border-radius: 50%;
  transition-delay: 0s, 1s, 2s;
  transition-property: background-color, color, border-radius;
  }
 
.animeD:hover {
  background-color: #00c;
  border-radius: 0%;
  color: #000;
  }

• animeD