Question

我尝试旋转：在元素之前但它不会旋转。请告诉我，我做错了什么。

HTML：

<div>hello</div>

CSS：

div {
    height:25px;
    line-height:25px;
    padding-left:35px;
    position:relative;
}

div:before {
    content:"";
    position:absolute;
    left:0;top:0;
    height:25px;
    width:25px;
    background:url(http://lorempixel.com/20/20/) no-repeat center;
    -webkit-transform:rotate(0deg);
    -webkit-animation-iteration-count:infinite;
    -webkit-animation: rotate 2s;
}

@-webkit-keyframes rotate { 
    100% { transform: rotate(360deg); } 
}

Answer 1

忘记动画属性prefix中的transform：

@-webkit-keyframes rotate { 
  100% { -webkit-transform: rotate(360deg); } 
}

正在使用 Demo

编辑：要使iteration-count工作改变CSS中的顺序，首先设置动画，然后设置他的属性：

-webkit-animation: rotate 2s; /*This First*/
-webkit-transform:rotate(0deg);
-webkit-animation-iteration-count:infinite;

Fiddle Demo

css3：转换伪元素的动画

1 个答案: