Html 旋转动画不适用于Safari 9
我在表单中的按钮上有一个旋转动画。该动画在FF、Chrome和IE上运行良好,。。。但不是在Safari 9上。我试着使用另一篇文章中建议的所有百分比,但没有效果 以下是我的工作: HTML:Html 旋转动画不适用于Safari 9,html,css,animation,Html,Css,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>
<!-- 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>
/* 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中的指令。因为css转换在内联元素上不起作用。令人惊讶的是,除了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
}
它可能只适用于下面这样的“内联块”显示,但我无法确认这一点
.spinner {
-webkit-animation:spin 1s infinite linear;
-moz-animation:spin 1s infinite linear;
animation:spin 1s infinite linear;
display: inline-block;
}
作为应答的css转换在内联元素上不起作用。令人惊讶的是,除了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
}
它可能只适用于下面这样的“内联块”显示,但我无法确认这一点
.spinner {
-webkit-animation:spin 1s infinite linear;
-moz-animation:spin 1s infinite linear;
animation:spin 1s infinite linear;
display: inline-block;
}