京东商城动画

http://js.jirengu.com/zukaxonuze/1/edit

  
  



  京
  东
  商
  城

span {
  display: inline-block;
/* loading 动画名称
4s animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计
infinite 循环次数,无限
linear线性播放
*/
  animation: loading 4s infinite linear;
}
span:nth-child(1){
  animation-delay: 0s;
}
span:nth-child(2){
  animation-delay: 1s;
}
span:nth-child(3){
  animation-delay: 2s;
}
span:nth-child(4){
  animation-delay: 3s;
}
/*
@keyframes 后面跟着一个名字
0 12.5% 25% 100% 时间
transform: scale(2) 放大倍数
*/
@keyframes loading {
  0%{
    transform: scale(1);
  }
  12.5% {
    transform: scale(2);
  }
  12.5%, 25%{
    transform: scale(2);
  }
  25%, 100% {
    transform: scale(1);
  }
}

image.png