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

  }   
  34%, 100% {   
    -webkit-transform: rotate(45deg) translate(208px) rotate(-45deg);   
            transform: rotate(45deg) translate(208px) rotate(-45deg);   
  }   
}   
@keyframes ani1 {   
  0%, 20% {   
    -webkit-transform: rotate(45deg) translate(0) rotate(-45deg);   
            transform: rotate(45deg) translate(0) rotate(-45deg);   
  }   
  34%, 100% {   
    -webkit-transform: rotate(45deg) translate(208px) rotate(-45deg);   
            transform: rotate(45deg) translate(208px) rotate(-45deg);   
  }   
}   
.avatar:nth-of-type(2) {   
  -webkit-animation: ani2 2s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
          animation: ani2 2s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
}   
@-webkit-keyframes ani2 {   
  0%, 20% {   
    -webkit-transform: rotate(90deg) translate(0) rotate(-90deg);   
            transform: rotate(90deg) translate(0) rotate(-90deg);   
  }   
  34%, 100% {   
    -webkit-transform: rotate(90deg) translate(208px) rotate(-90deg);   
            transform: rotate(90deg) translate(208px) rotate(-90deg);   
  }   
}   
@keyframes ani2 {   
  0%, 20% {   
    -webkit-transform: rotate(90deg) translate(0) rotate(-90deg);   
            transform: rotate(90deg) translate(0) rotate(-90deg);   
  }   
  34%, 100% {   
    -webkit-transform: rotate(90deg) translate(208px) rotate(-90deg);   
            transform: rotate(90deg) translate(208px) rotate(-90deg);