旋转动画不适用于Safari 9

时间:2015-11-16 21:44:25

标签: html css css3 animation

我在表单中的按钮上有一个旋转动画。动画在FF,Chrome和IE上运行得很好......但是在Safari 9上没有。我试着在另一篇文章中使用所有百分比,但它没有用。

这是我的工作:

HTML:

<!-- LOGIN BUTTON -->
<button type="submit" class="btn btn-block btn-primary">
    <span ng-if="!login.processing">Login</span>
    <span ng-if="login.processing" class="spinner">
        <span class="glyphicon glyphicon-repeat"></span>
    </span>
</button>

CSS:

/* ANIMATIONS ====================== */ 
.spinner {
    -webkit-animation:spin 1s infinite linear;
    -moz-animation:spin 1s infinite linear;
    animation:spin 1s infinite linear;
}

@keyframes spin {
    0%          { transform:rotate(0deg); }
    50%         { transform:rotate(180deg); }
    100%        { transform:rotate(360deg); }
}

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

@-moz-keyframes spin {
    0%          { -moz-transform:rotate(0deg); }    
    50%         { -moz-transform:rotate(180deg); }
    100%        { -moz-transform:rotate(360deg); }
}

我使用Angular,所以不要担心HTML中的指令。

1 个答案:

答案 0 :(得分:0)

回答here css-transforms不适用于内联元素。令人惊讶的是,这适用于除Safari之外的所有浏览器。这是一个可能的解决方法:

.spinner {
    -webkit-animation:spin 1s infinite linear;
    -moz-animation:spin 1s infinite linear;
    animation:spin 1s infinite linear;
    display: block;
    position: absolute;
    top: 7px;                  //adjust if needed
    left: calc(50% + 20px);    //adjust if needed       
}

jsfiddle with this solution

它可能仅适用于&#39; inline-block&#39;显示如下,但我无法确认。

.spinner {
    -webkit-animation:spin 1s infinite linear;
    -moz-animation:spin 1s infinite linear;
    animation:spin 1s infinite linear;
    display: inline-block;
}

jsfiddle