css3 animation之positon

 

/* map */

div.location {  width: 300px;  height: 200px;  border: 1px #f45 solid;  background: #000;  margin: 10px auto 0;   }

 

div.location-indicator {  position: relative;  content: "";  display: block;  margin: 20px auto 5px;  width: 30px;  height: 30px;  box-shadow: 0 0 0 2px #fff;  border-radius: 50% 50% 0 50%;  -webkit-transform: rotate(45deg);  -webkit-animation: mapping linear 3s infinite; }

div.yinying {  width: 50px;  height: 10px;  margin: 0 auto;  border-radius: 100%;  background: #fff;  opacity: 0.4; }

@-webkit-keyframes mapping {  0% {top: 0px;}   50% {top: -10px;}    100% {top: 0px;} }

@keyframes mapping {  0% {top: 0px;}   50% {top: -10px;}    100% {top: 0px;} }

<!-- map -->

<div class="location">
 <div class="location-indicator">
  
 </div>
 <div class="yinying"></div>
</div>

********