Animation How to - Chain enlarge and rotation CSS3 Animation

Question

We would like to know how to chain enlarge and rotation CSS3 Animation.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {<!--from  www  .j av a  2 s.com-->
  margin: 10px;
  border: 1px solid #ccc;
  background-image:url("http://www.java2s.com/style/download.png");
  background-position: center center;
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
  transition: width 2s, height 2s;
  -moz-transition: width 2s, height 2s, -moz-transform 2s;
  /* Firefox 4 */
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
  /* Safari and Chrome */
  -o-transition: width 2s, height 2s, -o-transform 2s; /* Opera */
}

div:hover {
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
  -moz-transform: rotate(180deg); /* Firefox 4 */
  -webkit-transform: rotate(180deg); /* Safari and Chrome */
  -o-transform: rotate(180deg); /* Opera */
}
</style>
</head>
<body>
  <div>java2s.com!</div>
</body>
</html>

The code above is rendered as follows: