- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我在 Internet-Explorer 和 Edge 中的旋转动画有问题。
我的动画像在 Chrome 中一样正常启动,但在达到 50% 后,它逆时针变为 75%,然后再次顺时针变为 100%;
我使用 rotate3d,因为它使用 GPU 而不仅仅是 CPU。
http://codepen.io/kmathmann/pen/RaGqRr
.rotate {
-webkit-animation: rotate 5s normal linear infinite;
animation: rotate 5s normal linear infinite;
}
@keyframes rotate {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
25% {
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
}
50% {
-webkit-transform: rotate3d(0, 0, 1, 180deg);
transform: rotate3d(0, 0, 1, 180deg);
}
75% {
-webkit-transform: rotate3d(0, 0, 1, 270deg);
transform: rotate3d(0, 0, 1, 270deg);
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 360deg);
transform: rotate3d(0, 0, 1, 360deg);
}
}
最佳答案
您仍然可以使用 2d 变换并添加空 3d 变换 translateZ(0)
以强制使用 GPU:
.rotate {
-webkit-animation: rotate 5s normal linear infinite;
animation: rotate 5s normal linear infinite;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotateZ(0deg) translateZ(0);
transform: rotateZ(0deg) translateZ(0);
}
25% {
-webkit-transform: rotateZ(90deg) translateZ(0);
transform: rotateZ(90deg) translateZ(0);
}
50% {
-webkit-transform: rotateZ(180deg) translateZ(0);
transform: rotateZ(180deg) translateZ(0);
}
75% {
-webkit-transform: rotateZ(270deg) translateZ(0);
transform: rotateZ(270deg) translateZ(0);
}
100% {
-webkit-transform: rotateZ(360deg) translateZ(0);
transform: rotateZ(360deg) translateZ(0);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotateZ(0deg) translateZ(0);
transform: rotateZ(0deg) translateZ(0);
}
25% {
-webkit-transform: rotateZ(90deg) translateZ(0);
transform: rotateZ(90deg) translateZ(0);
}
50% {
-webkit-transform: rotateZ(180deg) translateZ(0);
transform: rotateZ(180deg) translateZ(0);
}
75% {
-webkit-transform: rotateZ(270deg) translateZ(0);
transform: rotateZ(270deg) translateZ(0);
}
100% {
-webkit-transform: rotateZ(360deg) translateZ(0);
transform: rotateZ(360deg) translateZ(0);
}
}
div {
width: 50px;
height: 50px;
background-color: black;
text-align: center;
}
div > span {
color: white;
}
<div class="rotate" >
<span>top</span>
</div>
注意:这将解决您的问题,但它没有回答为什么 IE/Edge 不使用带正向量的顺时针旋转。
关于css - 旋转关键帧在 50% 和 75% 之间逆时针旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35989326/
我正在 Eclipse 上学习 clojure(逆时针插件)。 当我在 Eclipse 中单击“运行”时(就像我用 Java 做的那样)我没有 只有控制台打开,但这个“REPL”窗口。为什么有必要 它
是否可以查看您在 Eclipse 中逆时针 REPL 中输入的内容的历史?就像按向上箭头或 ctrl-p 或其他各种在其他 repl 中起作用的东西一样? 谢谢! -菲利普 最佳答案 是的,很抱歉没有
在 Eclipse+Counterclock 中,当我想连接到 REPL 时,对话框告诉我可以通过 HTTP 使用 nREPL: 如何设置? 这是否以某种方式连接到 drawbridge ?尽管 le
我使用的是来自 WWDC 的 Apple CircleLayout 的略微修改版本:https://github.com/mpospese/CircleLayout . 我当前的代码在顶部绘制第一个元
我有一组可能形成凹多边形的无序顶点。现在我想按顺时针或逆时针顺序排列它们。 An answer here建议执行以下步骤: 找到多边形中心 计算角度 按角度排序点 这显然只适用于凸多边形,当点形成凹多
我想知道与 Emacs 相比,Eclipse 的逆时针插件有哪些限制。 Eclipse 不会提供哪些 Lisp(和 Clojure)魔法? - 更新 - 我知道 Emacs 会有更多功能、快捷方式、各
我是一名优秀的程序员,十分优秀!