Question

考虑这个样本。

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

Answer 1

您需要为一个属性或另一个属性设置动画。您可以只为左侧设置动画，并使用left: calc(100% - elemWidth)（其中elemWidth是元素的宽度）或left: 100%; transform: translateX(-100%);如果元素的宽度未知。

还需要为背景颜色设置动画。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

@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之间跳跃的原因。

Answer 4

＆＃13;

responseJSON

＆＃13;

请参阅此片段...

Answer 5

这应该是这样的：

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

这就是它的解决方法：

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

基本上，由于您指定了初始左侧属性但未指定目标值，因此动画不知道该怎么做。它从left:0动画到left:initial。 Right履行了类似的功能，但仍然是另一个属性。

CSS使用从左0到右0的绝对定位为div设置动画

5 个答案: