animation不生效( transform)

做一个加载的动画,遇到animation无效
html代码

样式

/* 加载 */
@keyframes myload {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}
.news-list > .load {
  text-align: center;
}
.news-list > .load .iconload {
  line-height: 1;
  font-size: 0.375rem;
  animation: myload 0.5s linear infinite;
  display: inline-block;/*不转化成行内块,animation无效*/
  color: #999;
}

这里,必须把span转成行内块,不然animation无效,查了一下相关的资料,其实这里主要是 transform对行内元素无效,可以使用变换(transform)的元素必须是块级元素或者原子内联级元素,单纯的内联元素是不能应用变换的

你可能感兴趣的:(animation不生效( transform))