html - CSS3 动画方向不起作用

Question

我的网站上有一个使用 CSS3 的延长线动画。它是使用 div 宽度上的关键帧创建的，自然地它似乎是从左到右扩展的。但是我希望它从右向左扩展。我曾尝试在动画方向上使用“反向”，但没有任何乐趣。任何想法为什么？谢谢。

这是我的 fiddle http://jsfiddle.net/edrtB/

CSS

.line_left {
    height: 6px;
    width: 32vw;
    background-color: black;
    margin-top: 300px;
    margin-left: 40px;
    border-radius: 5px;
    float: left;
    -webkit-animation: expand 2s; /* Chrome, Safari, Opera */
            animation: expand 2s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes expand
{
    from {width: 0vw;}
    to {width: 32vw;}
}

 /* Standard syntax */
@keyframes expand
{
    from {width: 0vw;}
    to {width: 32vw;}
}

更新很明显，很难看出我想要达到的目标。这是站点 Logo 的图像，线条需要从中心向外动画。

Answer 1

您的问题不在于动画，而在于元素在页面上的定位方式；因为它是float:left , 它会尽可能地保持在左边。如果将其更改为 float:right ，它将尽可能向右移动并向左扩展。

Here's an updated version of your fiddle.

如果您不想在页面右侧显示扩展栏，您可以将其包装在包含 <div> 中。并将其放置在您想要的位置。看这个new fiddle update ，其中我通过设置容器的宽度并给它 margin:0 auto 来使扩展条居中。 .

编辑:如果您希望完全展开的条有效地“左浮动”，请使用上述技术将其包裹在 <div> 中。 , 设置 div的宽度，并将其向左浮动，如此 new fiddle update .