左右移动.. css仅非常通用 [英] left-right movement.. css only very generic
问题描述
我想编写一个通用的CSS动画来左右移动div,触摸容器的边缘..以一种简单的方式应用到我不知道的任何div上,除非它具有绝对位置
I would like to write a generic css animation to move a div right and left, touching the edges of the container .. to be applied in a simple way to any div of which I know nothing except that it has an absolute positioning.
问题是,简单地在0%处然后再在100%处放..消失了片刻,我应该使用calc(100%-width)..之类的东西. 放置50%的关键帧几乎就像我想要的一样,但是速度有所下降,并且不是很流畅和线性... 有什么建议,考虑到我不知道我的div多长,并且我不使用js/jquery,而只能使用CSS ..
The problem is that simply putting left at 0% and then at 100% .. for a few moments disappears, I should use something like calc (100% -width) .. Putting a 50% keyframe is almost like I would like, but there's a slowdown and it is not very fluid and linear ... Any suggestions, considering that I do not know how long my div will be, and i dont work with js/jquery, but only with css..?
https://codepen.io/alemarch/pen/vrvgMo
@keyframes destraSinistra {
0% {
left: 0%;
color: black;
right: unset;
}
50% {
left:50%;
right: 50%;
}
100% {
left:unset;
right: 0px;
color: green;
}
}
#div1 {
position: absolute;
border: solid 1px lightgray;
width: 100px;
top: 200px;
height: 30px;
background-color: lightgreen;
animation-name: destraSinistra;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate-reverse
}
推荐答案
结合使用transform
和left
或right
以避免添加任何固定值:
Use transform
combined with left
or right
to avoid adding any fixed value:
@keyframes destraSinistra {
0% {
left: 0;
}
100% {
left: 100%;
transform:translateX(-100%);
}
}
#div1 {
position: absolute;
border: solid 1px lightgray;
width: 100px;
height: 30px;
background-color: lightgreen;
animation: destraSinistra 1s linear infinite alternate
}
<div id="div1"></div>
这篇关于左右移动.. css仅非常通用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!