CSS3动画方向不起作用

Question

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

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

更新 已经很清楚了，很难看出我想要达到什么目标。这是网站徽标的图像，线条需要从中心向外进行动画处理。

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。