我想编写一个通用的CSS动画来左右移动div,触摸容器的边缘..以一种简单的方式应用于我除了具有绝对定位之外一无所知的任何div。
问题是,简单地将 left 设置为 0%,然后设置为 100% .. 一会儿就会消失,我应该使用诸如 calc (100% -width) 之类的东西。
设置 50% 关键帧几乎就像我想要的那样,但是速度会变慢,而且不是很流畅和线性......
考虑到我不知道我的 div 有多长,而且我不使用 js/jquery,而只使用 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
}
Use transform
结合left
or right
避免添加任何固定值:
@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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)