シンプルなホバー アニメーション効果_html/css_WEB-ITnose

HTML:

<div id="demo1" class="demo">demo1</div> <div id="demo2" class="demo">demo2</div>

CSS:

.demo {    width: 100px;    height: 100px;    text-align: center;    line-height: 100px;    border: 10px solid #ccc;    border-radius: 60px;    font-size: 20px;    -webkit-backface-visibility: hidden}#demo1 {transition: border-color .3s ease}#demo1:hover {border-color: #a3d7ff}#demo2 {transition: all 1s ease}#demo2:hover {background-color: #a3d7ff;transform: rotate(360deg);transition: background-color .3s ease}

注: 効果が確認できない場合は、理解しやすく読みやすくするために省略されているプレフィックス パラメーターを追加してください。

通常状態から一時停止状態に移行するとき、2 つの効果は同じです。つまり、通常->ホバーは順方向アニメーション トランジションです
一時停止状態から削除された状態に移行するときに、トランジション効果が書き込まれます。ホバー中にはスイッチ（通常→ホバー順方向アニメーション遷移、ホバー→通常逆方向アニメーション遷移）がありますが、通常状態で書かれた遷移は遅延なくすぐに消えます。つまり、ホバーからの遷移はありません。 ->正常。