做一个加载的动画，遇到animation无效
html代码
<div class="load"><span id="dataload" class="iconfont iconload"></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）的元素必须是块级元素或者原子内联级元素，单纯的内联元素是不能应用变换的。
网友评论