提问人：Bidou 提问时间：11/21/2022 最后编辑：Bidou 更新时间：11/22/2022 访问量：370
我希望我的文本从左到右出现，从左到右消失
I would like my text to appear from left to right and disappear from left to right as well
问：
我制作了一个简单的带有过渡的文本，当我在CSS中悬停时，它从左到右出现。
我的代码非常简单，如代码片段所示。
所以当然，当我移开鼠标光标时，它会在另一个方向上动画，文本从右到左消失。 但 我希望它从左到右消失，然后重置，这样它就可以从左到右再次出现，这就是我卡住的地方。
你会用什么方法来获得这样的效果？
谢谢！
.text{
transition: max-width 700ms linear;
max-width: 0%;
overflow: hidden;
white-space: nowrap;
}
.container:hover .text{
max-width: 100%;
}
.container{
padding: 10px 0 10px 0;
width: fit-content;
}<div class="container">
<div class="text">THIS IS MY TEXT</div>
</div>答：
0赞
Joydip Paul
11/21/2022
#1
<p class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe, praesentium.</p>
.text{
transition: max-width 700ms linear;
opacity: 0;
height: 20px;
overflow: hidden;
max-width: 0px;
}
.text:hover{
opacity: 1;
max-width: 100%;
}
评论
0赞
Bidou
11/21/2022
这如何使文本从左到右消失？顺便说一句，这正是我正在做的事情（减去无用的不透明度，因为最大宽度为 0px）。
1赞
A Haworth
11/21/2022
#2
你可以使用 CSS 动画 - 在非悬停状态下，文本移动到左：100% 位置，在悬停状态下，它从 -100% 位置移动到 0 位置。
如果使用过渡（而不是设置左侧位置）执行此操作，则容器将保持子文本的宽度。
这种方法的缺点是，第一次，即加载，可以看到文本从左到右。为了解决这个问题，这个片段有一点黑客，容器在页面生命周期的前 700 毫秒内不透明度为 0，然后被看到。
.text {
display: inline-block;
width: fit-content;
animation: out linear 700ms forwards;
transform: translateX(100%);
}
@keyframes out {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
.container:hover .text {
transform: translateX(0%);
animation: in linear 700ms;
}
@keyframes in {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
.container {
padding: 10px 0 10px 0;
width: fit-content;
rheight: fit-content;
animation: reveal 700ms linear;
overflow: hidden;
}
@keyframes reveal {
0%,
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="container">
<div class="text">THIS IS MY TEXT</div>
</div>评论
0赞
Bidou
11/22/2022
非常感谢，但不幸的是，这与我正在寻找的动画不同。在您的文本中，文本从左向右移动。在我的文本中，文本从左到右出现。我什至不能使用背景颜色的蒙版，因为我的文本后面有一个动画背景。
0赞
A Haworth
11/22/2022
您能否在问题中包含更完整的描述和代码，因为背景是相关的（并且可能是答案的一部分！
0赞
Bidou
11/22/2022
请在顶部查看我对自己的回答，我设法使用 clip-path 做到了。那时问题几乎解决了，多亏了你！
1赞
Bidou
11/22/2022
#3
我设法做到了，感谢海沃氏为我指明了正确的方向。 我现在需要检索实际的剪辑路径值，这样当鼠标在动画结束前没有结束时，它就不会像这样“跳跃”。我想如果可能的话，我在这里需要一些JS。
.text{
animation: out linear 700ms forwards;
}
.container:hover .text{
animation: in linear 700ms;
}
.container{
padding: 10px 0 10px 0;
width: fit-content;
animation: reveal 700ms linear;
}
@keyframes in {
0% {
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
100% {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
}
@keyframes out {
0% {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
100% {
clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
}
}
@keyframes reveal {
0%,
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="container">
<div class="text">THIS IS MY TEXT</div>
</div>
评论