Effect How to - Create transform translation when hover

Question

We would like to know how to create transform translation when hover.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
li {<!--  ww w  . j a v  a 2s .c  o m-->
  list-style: none;
  margin-bottom: 20px;
  float: left;
  clear: both;
}

li a {
  color: white;
  background-color: blue;
  display: block;
  height: 100px;
  width: 200px;
  transition: -webkit-transform 1s;
}

li.ease a {
  transition-timing-function: ease;
}

li:hover a {
  -webkit-transform: translateX(100px);
  background-color: red;
}
</style>
</head>
<body>
  <ul>
    <li class="ease"><a href="">java2s.com</a></li>
  </ul>
</body>
</html>

The code above is rendered as follows: