CSS左0动画与绝对定位的div来右0

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的。）

来源

2017-05-31 Dan Fabulich

你不能“动画”从一个_property_到另一个;您为属性的_value_设置动画。在这种情况下，对于元素宽度为20％的情况，您可以简单地将动画从0增加到80％。 – CBroe

你需要一个动画财产或其他。您只需动画左，要么使用left: calc(100% - elemWidth)（其中elemWidth是元素的宽度）或left: 100%; transform: translateX(-100%);如果元素的宽度是未知的。

还需要动画的背景颜色。

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

 
.animated { 
 
\t position: absolute; 
 
\t width: 20%; 
 
\t height: 100%; 
 
\t top: 0; 
 
\t background-color: red; 
 
\t 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>

来源

2017-05-31 21:53:37

@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什么是你的屏幕右边缘。

来源

2017-05-31 21:50:12 NightKn8

谢谢！你能帮我理解这里出了什么问题吗？ –

这会将框移到父窗口的右侧。它不会改变背景颜色。 –

更新了代码。 @MichaelCoker OP想澄清从左到右的过渡，颜色对他来说工作得很好。即使他的jsfiddle也只包含元素移动部分。 – NightKn8

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

看到这个片段中......

来源

2017-05-31 21:55:46 UXDart

的问题是，你开始动画属性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>

来源

2017-05-31 21:59:00

这是它应该是什么样子：

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

这是它的修复：

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

基本上，动画didnt知道自从你指定以来要做什么ied最初的左侧属性，但不是目标值。它从left:0动画到left:initial。正确履行类似的功能，但它的另一个属性。

来源

2017-05-31 22:00:26 Voidvalkon

CSS左0动画与绝对定位的div来右0

回答

相关问题