CSS动画不工作？尝试这些修复

光标到底是什么？

光标传达了用户的鼠标在网站上的位置以及他们可以采取的操作。

例如，当鼠标悬停在表格元素上时，光标可能会变为双向箭头，表示可以调整行或列的大小。当试图拖放图像时，光标可能会变为X，表示该操作被禁止。

光标可以被动画化以增加用户浏览体验的交互性。这些光标可能具有不寻常的形状，在单击时发生变化，或在颜色之间切换。下面的网站有一个动画光标和多个选项，人们可以在自己的网站上使用。

一个有趣的光标，像一个棒棒糖，玫瑰，或一个可爱的猫可以是一个伟大的选择为您的个人博客。然而，并不是每个网站都需要一个有趣的光标。如果你选择了额外的天赋，它需要匹配你的品牌。下面，我们将分享创意光标的使用示例。

多个未对齐的动画属性值

可以将多个不同的动画分配给同一个元素，其中多个值由逗号分隔。在下面的示例中，我将三个不同的动画应用于一个p元素。

注意animation-name和animation-duration各有三个值。animation-name的三个值为p元素分配了三个不同的关键帧规则。animation-duration的三个值分别为每个动画周期设置长度-第一个动画（change-color）的长度为8秒，其他两个动画的长度为5秒。

以这种方式创建动画时，请确保为每个animation-* 声明正确排序值。否则，您的动画将无法按预期方式工作。

如果要将同一属性值应用于所有动画，则只需在该属性的声明中包含一个值。在上面的例子中，我已经用animation-iteration-count实现了这一点--所有三个动画都将无限运行。

性能缓慢

CSS动画往往比其他类型的Web动画性能更好。然而，并非所有的CSS动画都是平等的，有些动画样式会比其他样式更慢。

大多数简单的CSS动画应该对页面加载时间没有明显的影响。但是，添加到动画中的效果越多，遇到性能问题的可能性就越大。

为避免性能低下，Google建议您限制使用会触发重画的动画。绘画是指浏览器在屏幕上逐像素地创建网页的视觉显示。绘制使用相对大量的处理能力，因此应尽可能限制动画引起的重绘次数。

不幸的是，大多数可动画化的CSS属性在更改时都会触发重画。例外情况是变换（用于缩放、旋转和位置）和不透明度，它们可以设置动画而对性能的影响最小。这里

不过，不要让这阻止你完全放弃动画。如果你遇到了速度问题，很可能是因为你试图一次执行多个元素，或者将动画应用于一个大的元素或一组元素。在网站上，CSS动画在巧妙地用于增强体验时是最好的，因此请考虑是否需要精心制作的动画来吸引访问者。