A simple hover animation effect,

A simple hover animation effect,

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. 3 s response} # demo1: hover {border-color: # a3d7ff} # demo2 {transition: all 1 s response} # demo2: hover {background-color: # a3d7ff; transform: rotate (360deg); transition: background-color. 3 s timeout}

Note: If the results cannot be viewed, add the prefix parameters of different browsers. this parameter is omitted for ease of reading.

From the normal state to the floating state, the two effects are the same, that is, normal-> hover transitions to the animation
• The transition effect written in hover from the suspension to the Removal state is a switching (normal-> hover transition to animation, hover-> normal reverse animation transition ), however, the transition written in the normal state quickly disappears without any delay, that is, there is no transition from hover-> normal.