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

  }   
}   
@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);   
  }   
}   
.avatar:nth-of-type(8) {   
  -webkit-animation: ani8 2s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
          animation: ani8 2s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
}   
@-webkit-keyframes ani8 {   
  0%, 20% {   
    -webkit-transform: rotate(360deg) translate(0) rotate(-360deg);   
            transform: rotate(360deg) translate(0) rotate(-360deg);   
  }   
  34%, 100% {   
    -webkit-transform: rotate(360deg) translate(208px) rotate(-360deg);   
            transform: rotate(360deg) translate(208px) rotate(-360deg);   
  }   
}   
@keyframes ani8 {   
  0%, 20% {   
    -webkit-transform: rotate(360deg) translate(0) rotate(-360deg);   
            transform: rotate(360deg) translate(0) rotate(-360deg);   
  }   
  34%, 100% {   
    -webkit-transform: rotate(360deg) translate(208px) rotate(-360deg);   
            transform: rotate(360deg) translate(208px) rotate(-360deg);   
  }   
}   
.avatar:nth-of-type(4):before, .avatar:nth-of-type(2):before {   
  -webkit-animation: bounce 3s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;