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

            transform: rotate(180deg) translate(208px) rotate(-180deg);   
  }   
}   
@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);   
            transform: rotate(180deg) translate(208px) rotate(-180deg);   
  }   
}   
.avatar:nth-of-type(5) {   
  -webkit-animation: ani5 2s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
          animation: ani5 2s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
}   
@-webkit-keyframes ani5 {   
  0%, 20% {   
    -webkit-transform: rotate(225deg) translate(0) rotate(-225deg);   
            transform: rotate(225deg) translate(0) rotate(-225deg);   
  }   
  34%, 100% {   
    -webkit-transform: rotate(225deg) translate(208px) rotate(-225deg);   
            transform: rotate(225deg) translate(208px) rotate(-225deg);   
  }   
}   
@keyframes ani5 {   
  0%, 20% {   
    -webkit-transform: rotate(225deg) translate(0) rotate(-225deg);   
            transform: rotate(225deg) translate(0) rotate(-225deg);   
  }   
  34%, 100% {   
    -webkit-transform: rotate(225deg) translate(208px) rotate(-225deg);   
            transform: rotate(225deg) translate(208px) rotate(-225deg);   
  }   
}   
.avatar:nth-of-type(6) {