今日の小ネタ:transitionについて

公開日:2017/04/06 更新日:2020/02/24

CSS3で実装されたtransitionプロパティについて

.animation {
    transition: opacity .4s ease;
}
.animation:hover {
    opacity: 0.6;
}

こんな感じでa要素のホバー時に手軽に透過アニメーションをさせることができますが




.animation:hover {
    transition: opacity .4s ease;
    opacity: 0.6;
}

アニメーション後の方にtransitionを記述しても問題ないです。

って思ったけど、ホバー解除した場合にアニメーションが適用されないですね。。。
Jqueryでアニメーションをしている要素にtransitionでの制御もしていると動きがおかしくなるのでその対処法として使うことがります。

上杉 洋

1991年生まれ。株式会社ステップバイワーク代表。2013年からホームページ制作の業界に入り、以後フリーランスを経て2022年に起業。 独自の理論で費用対効果の高いホームページを作るため日々精進しています。