京东商城动画

作者: 饥人谷_momo | 来源:发表于2018-05-21 22:33 被阅读9次

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <span>京</span>
  <span>东</span>
  <span>商</span>
  <span>城</span>

</body>

</html>

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