transition | CSS

アニメーションの実装で使用。

HTML

      <div class="transition">
        <a href="#" class="btn">遷移ボタン</a>
      </div>

CSS

.btn {
  display: block;
  width: 300px;
  line-height: 4rem;
  color: #fff;
  background-color: blue;
  text-align: center;
  transition: transform 0.3s ease 0.1s;
}

.btn:hover {
  transform: translate(-3px, -3px);
}

使い方

基本的な構文は下記

selector { transition: property duration timing-function delay; }

propertyで指定したCSSプロパティの変化をトリガーにして、
delayの間だけ待って、
durationの時間をかけて、
timing-functionの動作（速度曲線）でアニメーションする。