一款利用html5和css3动画排列人物头像的实例演示

  width: 64px;   
  background: #b5e763;   
  border-radius: 50%;   
  border: 5px solid white;   
  -webkit-animation: bounce 5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
          animation: bounce 5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
  -webkit-transform-origin: center;   
      -ms-transform-origin: center;   
          transform-origin: center;   
  z-index: 1;   
}   
.image .smiley svg {   
  position: absolute;   
  top: 0;   
  rightright: 0;   
  bottombottom: 0;   
  left: 0;   
  margin: auto;   
  -webkit-animation: bounce 5s 0.075s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
          animation: bounce 5s 0.075s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
}   
  
@-webkit-keyframes bounce {   
  0% {   
    -webkit-transform: scale(0);   
            transform: scale(0);   
  }   
  5% {   
    -webkit-transform: scale(1.5);   
            transform: scale(1.5);   
  }   
  10%, 100% {   
    -webkit-transform: scale(1);   
            transform: scale(1);   
  }   
}   
  
@keyframes bounce {   
  0% {   
    -webkit-transform: scale(0);   
            transform: scale(0);   
  }   
  5% {   
    -webkit-transform: scale(1.5);   
            transform: scale(1.5);