animation不生效( transform)

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

<div class="load"><span id="dataload" class="iconfont iconload">&#xe618;</span></div>

样式

/* 加载 */
@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)的元素必须是块级元素或者原子内联级元素,单纯的内联元素是不能应用变换的

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 CALayer IOS SDK详解之CALayer(一) http://doc.okbase.net/Hell...
    Kevin_Junbaozi阅读 10,573评论 3 23
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 5,542评论 0 6
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,831评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,786评论 0 2
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92