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;}
}

UPDATE 已经明确表示，我很难看到我想要实现的目标。这是一个站点徽标的图像，线条需要从中心向外动画。

Answer 1

您的问题不在于动画，而是在页面上如何定位元素;因为它是float:left，所以它会尽可能地留在左边。如果您将其更改为float:right，它会尽可能向右移动并向左展开。

Here's an updated version of your fiddle.

如果您不想在页面右侧放置展开栏，则可以将其打包在包含<div>的位置，然后将其包含在您喜欢的位置。请参阅此new fiddle update，其中我通过设置容器的宽度并将其margin:0 auto置于中心来展开展开栏。

修改：如果您希望完全展开的栏有效地＆＃34;左浮动，＆＃34;使用上述技术将其包裹在<div>中，设置为div的宽度，然后将其向左浮动，如此new fiddle update。