CSS使用从左0到右0的绝对定位为div设置动画(CSS animate a div with absolute positioning from left 0 to right 0)
考虑这个样本。
.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;
}
预期：当颜色从红色变为蓝色时，红色矩形应从左向右平滑地动画。
实际：在Chrome / Firefox中，红色矩形慢慢地将颜色变为紫色，然后从左到右传送而不进行动画制作，然后慢慢地从紫色变为蓝色。 在Safari中，矩形出现在右侧，从不从那里移动，同时从红色到蓝色动画。
这是为什么发生？ 我该如何解决它？ (我需要在CSS中修复它...没有JS，没有jQuery。)
Consider this sample.
.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;
}
Expected: The red rectangle should smoothly animate from left to right as the color changes from red to blue.
Actual: In Chrome/Firefox, the red rectangle slowly changes color to purple, then teleports from left to right without animating, and then slowly changes from purple to blue. In Safari, the rectangle appears on the right and never moves from there, while animating from red to blue.
Why is this happening? How can I fix it? (I need to fix it in CSS… no JS, no jQuery.)
原文：https://stackoverflow.com/questions/44295187
更新时间：2020-01-12 03:00
最满意答案
您需要为一个属性或另一个属性设置动画。 您可以只为左侧动画并使用left: calc(100% - elemWidth) (其中elemWidth是元素的宽度)或left: 100%; transform: translateX(-100%); 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;
}
}
You need to animate one property or the other. You can just animate left and either use left: calc(100% - elemWidth) (where elemWidth is the width of the element) or left: 100%; transform: translateX(-100%); if the width of the element is unknown.
Also need to animate background color.
.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;
}
}
相关问答
您需要使用negative margins - margin-left:-121px 。 这将以标志为中心。 之后，您需要正确定位导航... You need to use negative margins - margin-left:-121px. That will center the logo. After that you'll need to properly position your nav...
为什么不尝试这个，比简单的像素更简单，更通用： .div {
position:absolute;
border:1px solid black;
width:100px;
height:100px;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
why not try this, its simpler and more general than messing with pixels: .div {
position:absol
...
添加position:relative对于#main： #main {
background-color:grey;
width:60%;
float:right;
max-height:400px;
position:relative;
}
jsFiddle示例 Add position:relative to #main: #main {
background-color:grey;
width:60%;
float:right
...
不要绝对放置你的容器。 .container {width：400px; height：400px; margin：10px; 位置：相对; 向左飘浮; } 在最后一个容器div的末尾，你需要一个div来清除：left;
现在当你添加更多的div时，它们将自动浮动，并且容器将被清除。 Don't position your containers absolutely. .container { width: 400px; heigh
...
您需要为一个属性或另一个属性设置动画。 您可以只为左侧动画并使用left: calc(100% - elemWidth) (其中elemWidth是元素的宽度)或left: 100%; transform: translateX(-100%); left: 100%; transform: translateX(-100%); 如果元素的宽度未知。 还需要动画背景颜色。 .container {
position: relative;
width: 80%;
height: 100px
...
我今天需要类似的东西。 我想要一个按钮，该文本以右边的文本对齐开始，然后将文本设置为以悬停/焦点为中心。 这就是我想出的。 我遇到的几个答案的问题是它们的动画“位置”，这不是很有效 。 我只想使用“转换”。 这只是用于居中按钮文本的很多标记，但似乎运行良好。 body {margin: 0}
ul, li {
margin: 0;
padding: 0;
}
li {
width: 30%;
padding: 10px 0;
}
button {
width
...
我使用绝对定位的经验很适合你在大小方面100％控制的元素; 像徽标，meny，rss链接和类似的东西。 然后，您可以将这些元素准确放置在您想要的位置。 当我在页面上显示动态内容时，我更喜欢使用float，因为元素的大小可以改变，并且关系中所有元素的放置对于浮点数非常有用。 只需记住在需要时清除浮子！ I my experience using absolute positioning works well on elements you are in 100% control of in term
...
如果第一个div具有已知/固定width ，只需将第二个div的left-margin调整为该数量， 小提琴 If the first div has a known / fixed width, simply adjust the left-margin of the second div to that amount, Fiddle
您在示例小提琴中使用了“position：static” 。 静态意味着元素将像往常一样流入页面。 有关更多信息。 关于使用css定位元素请参考此链接 。 绝对定位元素并将顶部和左侧设置为0px意味着您要将其对齐在顶部。 要对齐父元素底部的元素，您必须设置bottom属性(不是top属性) CSS代码： {
position: absolute;
bottom: 0px;
left: 0px;
}
希望能帮助到你。
...
您可以使用float属性执行此操作。 .container {
position: relative;
}
.column_2 {
margin-right: 120px;
height: 600px;
background: blue;
}
.column_1 {
width: 120px;
height: 100px;
background: green;
float: right;
-webkit-transition:
...
2474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
