Javascript 关键帧动画是否在span id'；s

我有一个带id的span

<p style="text-align: center;"><span id="jrm-featured-products" style="font-family: Poiret One; font-size: 36px;">Featured  Products</span></p>

动画可以工作，但只会淡入淡出状态。没有像它应该的那样旋转。我在一个部门id上试过，效果很好

我的span代码正确吗？还是有任何错误？

另外，我正在使用jquery插件Waypoints，这就是为什么有一个.animate。（它切换它，从而在elemet进入视图时创建动画）但这与我的问题不太相关

另外，我不想说太长的故事，但我确实需要它来针对span id而不是div id

---

谢谢

您已将

用于

jrm功能产品

<代码>表示CSS中的类<代码>#表示CSS中的ID。因此，您只需将

替换为

---

如果要为跨度元素设置动画，则需要使其表现为具有位置、宽度等。默认情况下，跨度不会，它只会占用其所在的空间。因此，您需要添加

display:inline块到您的样式/css。在你的情况下，我想应该是：

#jrm-featured-products.animate{
-webkit动画：旋转向内左3秒；
-moz动画：旋转向内左3秒；
动画名称：rotateInDownLeft；
能见度：可见；
显示：内联块；
}

另外，我很确定可以使用
display:inline block和在不设置动画时隐藏，可以使用
display:none
对不起，我贴错了css。这是我针对自定义div类时使用的。我会在一秒钟内更新。很抱歉抱歉，伙计们，发布了我要测试的div类的css。现在岗位上一切都很好。很抱歉所以基本上问题是动画只会淡出。它不会像根据代码假设的那样旋转
 @-webkit-keyframes rotateInDownLeft {
    0% {
       -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
       -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: left bottom;
         transform-origin: left bottom;
        -webkit-transform: rotate(0);
         transform: rotate(0);
         opacity: 1;
      }
    }

    @keyframes rotateInDownLeft {
    0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    opacity: 0;
    }

    100% {
         -webkit-transform-origin: left bottom;
         -ms-transform-origin: left bottom;
          transform-origin: left bottom;
         -moz-transform-origin: left bottom;
         -webkit-transform: rotate(0);
         -ms-transform: rotate(0);
          transform: rotate(0);
         -moz-transform: rotate(0);
          opacity: 1;
      }
    }

    #jrm-featured-products.animate {
         -webkit-animation: rotateInDownLeft 3s;
         -moz-animation: rotateInDownLeft 3s;
          animation-name: rotateInDownLeft;
         visibility: visible;
    }

    #jrm-featured-products {
         visibility:  hidden;
    }

#jrm-featuredproducts.animate {
-webkit-animation: rotateInDownLeft 3s;
-moz-animation: rotateInDownLeft 3s;
animation-name: rotateInDownLeft;
visibility: visible;
}

#jrm-featuredproducts {
visibility:  hidden;
}