Animation How to - Hover to scale out list items

Question

We would like to know how to hover to scale out list items.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
ul {<!--from ww w.  j  a  va  2s .  c  o m-->
  background-color: #eee;
  -webkit-transform: scaleY(0);
  -o-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: top;
  -o-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  -o-transition: -o-transform 0.3s ease-in-out;
  -ms-transition: -ms-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}

p:hover ~ ul {
  -webkit-transform: scaleY(1);
  -o-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
}
</style>
</head>
<body>
  <p>Here (scaleY(1))</p>
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</body>
</html>

The code above is rendered as follows: