logo标签列表

使用CSS将带有绝对定位的div从左侧0移动到右侧0

csscss-animations
10

请看这个示例。

http://jsfiddle.net/dfabulich/ncbzz5zu/3/

<html>
<body>
<style>
.container {
    position: relative;
    width: 80%;
    height: 100px;
    border: 1px solid black;
}

@keyframes slide {
  from { background-color: red; left: 0; }
  to { background-color: blue; right: 0; }
}

.animated {
    position: absolute;
    width: 20%;
    height: 100%;
    top: 0;
    background-color: red;
    animation-duration: 3s;
    animation-name: slide;
    animation-iteration-count: infinite;
}

</style>
<div class=container>
<div class=animated>
</div></div>

期望结果：随着颜色从红色变成蓝色，红色矩形应该平滑地从左向右移动。

实际结果：在Chrome/Firefox中，红色矩形缓慢变色为紫色，然后瞬间从左到右跳跃，没有动画效果，最后又缓慢地从紫色变为蓝色。在Safari中，矩形出现在右侧并且未移动，同时从红色渐变到蓝色时有动画效果。

为什么会发生这种情况？我该如何解决？（需要在CSS中解决，不使用JS或jQuery。）

你不能从一个属性“动画”到另一个属性；你只能动画化一个属性的值。在这种情况下，由于元素宽度为20%，你可以简单地将左侧从0动画到80%。 - CBroe
5个回答
19

您需要动画化其中一个属性。您可以只动画左侧，然后使用 left: calc(100% - elemWidth)（其中 elemWidth 是元素的宽度），或者如果不知道元素的宽度，则使用 left: 100%; transform: translateX(-100%);。

还需要动画化背景颜色。

.container {
 position: relative;
 width: 80%;
 height: 100px;
 border: 1px solid black;
}

.animated {
 position: absolute;
 width: 20%;
 height: 100%;
 top: 0;
 background-color: red;
 animation: 3s linear 0s slide infinite;
}

@keyframes slide {
  from { left: 0; }
  to {
    left: 100%;
    transform: translateX(-100%);
    background: blue;
  }
}
<div class=container>
<div class=animated>
</div></div>

1
@keyframes slide {
  from { left: 0;}
  to { left: 80%; } // edit: actually endpoint should point to left:100% minus width of the element so in your case 100%-20% = 80%. In case of width of the element in px use CSS calc like:  left: calc(100% - ##px);
}

当你使用right时，你告诉过渡效果改变了完全不同的属性。这就是为什么你在屏幕左侧的left: 0和屏幕右侧的right: 0之间跳动。

谢谢！你能帮我理解这里出了什么问题吗？ - Dan Fabulich
这将把盒子移到父元素的右侧之外。并且不会改变背景颜色。 - Michael Coker
更新了代码。@MichaelCoker OP想要澄清只有从左到右的过渡，颜色对他来说是正常的。即使他的jsfiddle中也只包括元素移动部分。 - NightKn8
期望结果：红色矩形应该在颜色从红色变为蓝色的同时平滑地从左到右移动。 - Michael Coker
1
问题在于您开始动画属性left，但最终用right替换它，这就是为什么会跳跃的原因。您应该保持动画相同的属性，以获得逐步的动画进展。 

.container {
    position: relative;
    width: 80%;
    height: 100px;
    border: 1px solid black;
}

@keyframes slide {
  from { background-color: red; left: 0; }
  to { background-color: blue; left: 80%; }
}

.animated {
    position: absolute;
    width: 20%;
    height: 100%;
    top: 0;
    background-color: red;
    animation-duration: 3s;
    animation-name: slide;
    animation-iteration-count: infinite;
}
<div class="container"><div class="animated"></div></div>

0

这就是它应该看起来的样子：

http://jsfiddle.net/ncbzz5zu/11/

这是它的修复方法：

@keyframes slide {
  from { background-color: red;
         left:0%;}
  to { background-color:blue; 
        left:80%;}
}

基本上，动画不知道该怎么做，因为你指定了起始的 left 属性，但没有目标值。它从 left:0 动画到 left:initial。Right 属性与 left 类似，但仍然是另一个属性。
0

<html>
<body>
<style>
.container {
    position: relative;
    width: 80%;
    height: 100px;
    border: 1px solid black;
}

@keyframes slide {
  0% { background-color: red; left: 0; }
  100% { background-color: blue; left: 100%; margin-left: -20%; }
}

.animated {
    position: absolute;
    width: 20%;
    height: 100%;
    top: 0;
    background-color: red;
    animation-duration: 3s;
    animation-name: slide;
    animation-iteration-count: infinite;
}

</style>
<div class=container>
<div class=animated>
</div></div>

看一下这段代码...

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接