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

  }   
}   
.avatar:nth-of-type(3) {   
  -webkit-animation: ani3 2s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
          animation: ani3 2s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
}   
@-webkit-keyframes ani3 {   
  0%, 20% {   
    -webkit-transform: rotate(135deg) translate(0) rotate(-135deg);   
            transform: rotate(135deg) translate(0) rotate(-135deg);   
  }   
  34%, 100% {   
    -webkit-transform: rotate(135deg) translate(208px) rotate(-135deg);   
            transform: rotate(135deg) translate(208px) rotate(-135deg);   
  }   
}   
@keyframes ani3 {   
  0%, 20% {   
    -webkit-transform: rotate(135deg) translate(0) rotate(-135deg);   
            transform: rotate(135deg) translate(0) rotate(-135deg);   
  }   
  34%, 100% {   
    -webkit-transform: rotate(135deg) translate(208px) rotate(-135deg);   
            transform: rotate(135deg) translate(208px) rotate(-135deg);   
  }   
}   
.avatar:nth-of-type(4) {   
  -webkit-animation: ani4 2s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
          animation: ani4 2s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
}   
@-webkit-keyframes ani4 {   
  0%, 20% {   
    -webkit-transform: rotate(180deg) translate(0) rotate(-180deg);   
            transform: rotate(180deg) translate(0) rotate(-180deg);   
  }   
  34%, 100% {   
    -webkit-transform: rotate(180deg) translate(208px) rotate(-180deg);