Animation How to - Animate different durations for different properties with transitions








Question

We would like to know how to animate different durations for different properties with transitions.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div#bounce {<!--from   w ww  . j a  v a  2  s.  com-->
  width: 200px;
  height: 200px;
  background-color: red;
  -webkit-transition-duration: 50ms, 200ms;
  -webkit-transition-property: margin, background;
  -webkit-transition-timing-function: ease;
}

div#bounce:hover {
  background-color: green;
  margin-top: 25px;
}
</style>
</head>
<body>
  <div id="bounce"></div>
</body>
</html>

The code above is rendered as follows: