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

  -webkit-animation: ani6 2s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
          animation: ani6 2s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
}   
@-webkit-keyframes ani6 {   
  0%, 20% {   
    -webkit-transform: rotate(270deg) translate(0) rotate(-270deg);   
            transform: rotate(270deg) translate(0) rotate(-270deg);   
  }   
  34%, 100% {   
    -webkit-transform: rotate(270deg) translate(208px) rotate(-270deg);   
            transform: rotate(270deg) translate(208px) rotate(-270deg);   
  }   
}   
@keyframes ani6 {   
  0%, 20% {   
    -webkit-transform: rotate(270deg) translate(0) rotate(-270deg);   
            transform: rotate(270deg) translate(0) rotate(-270deg);   
  }   
  34%, 100% {   
    -webkit-transform: rotate(270deg) translate(208px) rotate(-270deg);   
            transform: rotate(270deg) translate(208px) rotate(-270deg);   
  }   
}   
.avatar:nth-of-type(7) {   
  -webkit-animation: ani7 2s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
          animation: ani7 2s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
}   
@-webkit-keyframes ani7 {   
  0%, 20% {   
    -webkit-transform: rotate(315deg) translate(0) rotate(-315deg);   
            transform: rotate(315deg) translate(0) rotate(-315deg);   
  }   
  34%, 100% {   
    -webkit-transform: rotate(315deg) translate(208px) rotate(-315deg);   
            transform: rotate(315deg) translate(208px) rotate(-315deg);