Javascript 在横幅css动画上滑入文本

我想从左到右翻译横幅上的文本。我已经从这个网站上引用了动画

他们正在使用jQuery/javaScript制作动画。同样的效果，我希望有使用CSS

我试图用CSS复制相同的效果，但我的效果不如参考资料中给出的平滑

在被引用的站点中，文本动画速度逐渐减慢，不透明度设置工作正常。我无法在代码中产生相同的效果。可能我在关键帧中缺少了一些断点

我想在悬停时显示这个动画，这样当用户悬停时，文本应该回到它在动画中的原始位置

.banner{
宽度：500px；
高度：300px；
背景颜色：绿色；
边界半径：4px；
溢出：隐藏；
左侧填充：20px
}
.内容{
宽度：200px
}
.头衔{
转换：translateX（-1000px）；
字体大小：20px；
颜色：#fff；
填充顶部：10px
}
.说明{
转换：translateX（-1000px）；
字体大小：20px；
颜色：#fff；
填充顶部：10px
}
.横幅：悬停.标题{
动画：slideInRight 1s；
动画填充模式：向前
}
.banner:hover.description{
动画：slideInRight 1s 80ms；
动画填充模式：向前
}
@关键帧向右滑动{
0% {
转换：translateX（-100px）；
不透明度：0；
}
50%{
不透明度：0.2；
}
80%{
不透明度：0.6；
}
100% {
变换：translateX（0）；
不透明度：1
}
}

我是冠军
Lorem Ipsum只是印刷和排版行业的虚拟文本。乱数假文

第一个带动画的答案

.banner{
宽度：500px；
高度：300px；
背景颜色：绿色；
边界半径：4px；
溢出：隐藏；
左侧填充：20px
}
.内容{
宽度：200px
}
.头衔{
转换：translateX（-1000px）；
字体大小：20px；
颜色：#fff；
填充顶部：10px；
动画：滑出1s 80ms；
动画填充模式：向前
}
.说明{
转换：translateX（-1000px）；
字体大小：20px；
颜色：#fff；
填充顶部：10px；
动画：滑出1s 80ms；
动画填充模式：正向；
}
.横幅：悬停.标题{
动画：slideInRight 1s；
动画填充模式：向前
}
.banner:hover.description{
动画：slideInRight 1s 80ms；
动画填充模式：向前
}
@关键帧向右滑动{
0% {
转换：translateX（-100px）；
不透明度：0；
}
50% {
不透明度：0.2；
}
80% {
不透明度：0.6；
}
100% {
变换：translateX（0）；
不透明度：1
}
}
@关键帧向外滑动{
0% {
变换：translateX（0）；
不透明度：1；
}
50% {
不透明度：0.8；
}
80% {
不透明度：0.6；
}
100% {
转换：translateX（-100px）；
不透明度：0
}
}

我是冠军
Lorem Ipsum只是印刷和排版行业的虚拟文本。乱数假文

检查小提琴，希望这能解决您的问题：）

小提琴：

.banner{
宽度：500px；
高度：300px；
背景颜色：绿色；
边界半径：4px；
溢出：隐藏；
左侧填充：20px
}
.内容{
宽度：200px；
}
.标题{
字体大小：20px；
颜色：#fff；
填充顶部：10px；
不透明度：0；
转换：translateX（-100px）；
过渡：全部为.8s线性；
}
.说明{
字体大小：20px；
颜色：#fff；
填充顶部：10px；
不透明度：0；
转换：translateX（-100px）；
过渡：全部为.8s线性；
}
.横幅：悬停.标题{
不透明度：1；
变换：translateX（0）；
}
.banner:hover.description{
不透明度：1；
变换：translateX（0）；
}

我是冠军
Lorem Ipsum只是印刷和排版行业的虚拟文本。乱数假文

编辑： 这是我一直在谈论的修复方法，我已经在路径

.banner.content.title

和

.banner.content.description

上应用了动画。我已经编辑了你的小提琴。我已将

.content

设置为

显示：默认情况下无。当触发
mouseenter
事件时，
.content
更改为
display:block
，然后应用动画。我希望有帮助。我已经更新了小提琴的链接


$（“.banner”）.mouseenter（函数（）{
$（“.content”）.css（“显示”、“块”）；
});
.banner{
宽度：500px；
高度：300px；
背景颜色：绿色；
边界半径：4px；
溢出：隐藏；
左侧填充：20px
}
.内容{
宽度：200px；
显示：无；
}
.头衔{
转换：translateX（-1000px）；
字体大小：20px；
颜色：#fff；
填充顶部：10px
}
.说明{
转换：translateX（-1000px）；
字体大小：20px；
颜色：#fff；
填充顶部：10px
}
.横幅.内容.标题{
动画：slideInRight 1s；
动画填充模式：正向；
}
.banner.content.description{
动画：slideInRight 1s；
动画填充模式：正向；
}
@关键帧向右滑动{
0% {
转换：translateX（-100px）；
不透明度：0；
}
50%{
不透明度：0.2；
}
80%{
不透明度：0.6；
}
100% {
变换：translateX（0）；
不透明度：1
}
}

我是冠军
Lorem Ipsum只是印刷和排版行业的虚拟文本。乱数假文
在
css
脚本中，我确实更改了
@keyframe slideInRight{}
的位置后，它才开始工作，我在调用它之前就把它放好了，然后它就为我工作了。
所以在悬停之后，当文本出现时，您希望文本保持在那里还是消失，因为它当前正在工作？@Code\u Ninja我希望文本保持在那里，直到用户悬停在那里，动画元素之间的延迟。这就是为什么我特意添加了延迟功能。让我试试，我对CSS动画还是比较陌生。@Carlos我可以用jQuery来描述文本保持原样的情况吗？我很想看到CSS修复程序，但是，你可以用jQuery来尝试在
上应用动画。横幅：hover.content.title
和
.bann