Animation How to - Create animation to start from center of div using css3 only

Question

We would like to know how to create animation to start from center of div using css3 only.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#container {<!--   ww  w .ja va  2  s  .  co  m-->
  width: 700px;
  height: 350px;
  position: absolute;
  left: 50%;
  top: 50%;
  xmargin: -175px 0 0 -350px;
}

#intro {
  position: relative;
  width: 700px;
  height: 350px;
  box-shadow: 5px 5px 5px #333;
  -webkit-box-shadow: 5px 5px 5px #333;
  -moz-box-shadow: 5px 5px 5px #333;
  border-top: 2px solid #ccc;
  border-left: 2px solid #ccc;
  border-radius: 10px;
  -moz-border-radius: 10px;
  animation: welcome 2s;
  animation-timing-function: linear;
  animation-play-state: running;
  -webkit-animation: welcome 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  -webkit-animation-play-state: running;
}

@keyframes welcome {
  from { width:0px;
  margin-left: 0;
  margin-top: 0;
  height: 0px;
  }
  to {
  width: 700px;
  margin-left: -350px;
  margin-top: -175px;
  height: 350px;
  }
}
@-webkit-keyframes welcome {
  from { width:0px;
  height: 0px;
  margin-left: 0;
  margin-top: 0;
  }
  to {
  width: 700px;
  height: 350px;
  margin-left: -350px;
  margin-top: -175px;
  }
}
</style>
</head>
<body>
  <div id="container">
    <div id="intro">
      java2s.com!
    </div>
  </div>
</body>
</html>

The code above is rendered as follows: