Question

我有一个带有id的跨度。

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

这是我的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;
    }

动画有效，但只会消失。没有像它应该的旋转。我在div id上尝试了它并且它有效。

我的跨度代码是否正确？或任何错误？

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

另外，我会饶恕你的故事，但我真的需要它来定位跨度id而不是div id。

谢谢！

Answer 1

您已将.用于jrm-featuredproducts。 .表示CSS中的类。 #表示CSS中的ID。因此，您只需将.替换为#。

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

#jrm-featuredproducts {
visibility:  hidden;
}

Answer 2

如果你想为一个span元素设置动画，你需要让它看起来像是有一个位置，宽度等。默认情况下，span不会占用它所占用的空间。。因此，您需要将display: inline-block;添加到您的跨度样式/ css中。在你的情况下，我想这将是：

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

此外，我确定您只能使用display: inline-block;代替可见度，并且在不动画时隐藏您可以使用display: none;。

关键帧动画是否适用于span id？

2 个答案: