2019年11月07日(木)

• HTML入門
• Web
• HTML
• css

 CSS transition-property プロパティ

transition-property（トランジション-プロパティ） プロパティは、トランジション効果を適用するプロパティを指定します。

transition-property（トランジション-プロパティ） プロパティ使い指定したプロパティのみ変化を与えることができます。

<div class="anime"></div>

.anime {
  width: 100px;
  height: 100px;
  background-color: #c00;
  transition-property: color;
  transition-duration: 500ms;
  transition-delay: 0s;
  transition-timing-function: ease;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  font-size: 1.6rem;
  }
 
.anime:hover {
  background-color: #00c;
  color: #000;
  width: 200px;
  }

下記のデモは文字の色だけが徐々に変化するものです。これは「transition-property: color;」と指定しているので色の変化しか起きません。

これを「transition-property: all;」と値にallを入れると全体の要素が徐々に変わる動きになります。