javascript - 自己写的css3的animation动画会有明显的卡顿效果？
不知道为什么自己写的css3的animation动画会有明显的卡顿效果？demo如下
https://codepen.io/bruce-zhang932/pen/BaGeEQJ
<div class="item-cf item-cf-ani"></div>@keyframes itemCfAni { 0% { transform: rotate(0); } 25% { transform: rotate(12deg); } 50% { transform: rotate(0); } 75% { transform: rotate(-12deg); } 100% { transform: rotate(0); }}.item-cf-ani{ animation: itemCfAni 4s ease-in-out infinite; transform-origin: 0 100%;}共有2个答案
看不出来有卡顿，每一阶段动画都是完整的 ease-in-out，过渡很平滑。
你的问题应该是为什么动画不连贯吧？我建议你把目标动画效果描述一下，方便大家帮你想办法。
这样子看起来更卡顿:
.item-cf-ani{ animation: itemCfAni 4s steps(4) infinite; transform-origin: 0 100%;}这样子就不一样了:
.item-cf-ani{ animation: itemCfAni 4s linear infinite; transform-origin: 0 100%;}这个时间函数是有关系的.
-
动画是进行形状变化和用元素创建动作的过程。 @keyframes 关键帧将控制CSS3中的中间动画步骤。 带左动画的关键帧示例 - @keyframes animation { from {background-color: pink;} to {background-color: green;} } div { width: 100px; height: 100px;
-
本文向大家介绍CSS3 动画卡顿性能优化的完美解决方案，包括了CSS3 动画卡顿性能优化的完美解决方案的使用技巧和注意事项，需要的朋友参考一下 为什么会卡顿？ 有一个前提必须要提，前端开发者们都知道，浏览器是单线程运行的。但是我们要明确以下几个概念：单线程，主线程和合成线程。 虽然说浏览器执行js是单线程执行（注意，是执行，并不是说浏览器只有1个线程，而是运行时，runing），但实际上浏览器的2
-
问题内容： CSS3动画出现问题。 仅当我删除的更改时，此代码才有效。 我想在悬停后立即更改显示，但不透明度应使用过渡进行更改。 问题答案： 我改变了一点，但结果很漂亮。 谢谢大家
-
问题内容： 我正在使用一个教程使用CSS3和jQuery创建翻页卡效果，但在将高度调整为内容长度的同时仍然在中心水平位置翻转时遇到了问题。 码： 问题答案： 这是 jsFiddle 上的可行 解决方案。 JS： 定义的高度不灵活，因此您看到的就是定义的高度。由于高度将不会保持恒定，因此前部或后部需要具有定义的高度，以匹配最高的元素。在示例中，较高，因此将其更新为相同的高度，从而使您能够在中心实
-
问题内容： 我已经回顾了很多演示，并且不知道为什么我无法使CSS3自旋起作用。我正在使用最新的稳定版Chrome。 问题答案： 要使用CSS3动画，您还必须定义实际的动画关键帧（ 您将其命名为） 配置了动画的时间后，您需要定义动画的外观。这是通过使用规则建立两个或更多关键帧来完成的。每个关键帧描述动画元素在动画序列中给定时间应如何呈现。
-
问题内容： 真的没有办法使用CSS为渐变背景设置动画吗？ 就像是： 我知道，对于Safari 5.1+和Chrome 10+，有一个新的渐变语法，但是现在，对于该项目，我必须坚持使用旧的语法。 问题答案： Webkit渐变尚不支持过渡。它已在规格中，但尚无法使用。 （ps，如果您仅执行颜色转换-您可能要签出-webkit-filters-可以进行动画处理！） 更新：渐变过渡显然可以在IE10 +中