动画有效,但只会消失。没有像它应该的旋转。我在div 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。
谢谢!
答案 0 :(得分:2)
将范围设置为display: block
。
<span>
元素设置为display: inline
,而<div>
元素默认设置为display: block
。仅block level elements can be transformed。虽然span不是块级元素,但您可以通过将其display属性设置为block
来使其表现为一个。
在此处详细了解内联与块级元素:http://www.impressivewebs.com/difference-block-inline-css/
答案 1 :(得分:0)
Div将整行作为其宽度,但是跨度宽度区域仅是文本或图像所覆盖的区域,因此它不会旋转的位置,通过style =“width:500px”给出一些宽度
因为span是INLINE而div是BLOCK
答案 2 :(得分:0)
将span显示设置为'block',默认范围是内联元素
答案 3 :(得分:0)
尝试使用display: inline-block
跨度的宽度将缩小以适合内容