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

Web制作 2017.04.06

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での制御もしていると動きがおかしくなるのでその対処法として使うことがります。

Hiroshi Uesugi

Toyonaka,Osaka

最後まで読んでいただきありがとうございます!
フロントエンドエンジニアとして、大阪でフリーランスとしてWeb制作をしています。