A simple hover animation effect_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}

Note : If the effect cannot be seen, please add the prefix parameters of different browsers yourself. For the convenience of understanding and reading, it is omitted.

When going from the normal state to the suspended state, the two effects are the same, that is, normal->hover forward animation transition
? When going from the suspended state to the removed state, the transition effect written in the hover is A kind of switching (normal->hover forward animation transition, hover->normal reverse animation transition), but the transition written in the normal state disappears quickly without any delay. In other words, there is no delay from hover->normal. any transition.