我有一个问题，我的文字是移动x方向，而不是30度。我需要把文字移动30度。我使用transform: rotate (30deg)，我在开始transformX:100%和设置结束transformX=-100%上创建关键帧动画，但它不起作用。截图
section{
height: 100vh;
width: 130%;
overflow: hidden; }
section .type-text{
display: flex;
white-space:nowrap;
overflow: hidden;
animation: animate 80s linear infinite; }}
ul{transform: rotate(-30deg);}
`@keyframes animate {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
section .animating{
animation: animate 10s linear infinite;`<body>
<section class="type-hover">
<div id="anime" class="animating">
<ul class="type-text">
<li>Happy</li>
<li>Birthday</li>
<li>Angela</li>
<li>Moshi</li>
<li>Happy</li>
<li>Birthday</li>
<li>Angela</li>
<li>Moshi</li> <li>Happy</li>
<li>Birthday</li>
<li>Angela</li>
<li>Moshi</li>
<li>Happy</li>
<li>Birthday</li>
<li>Angela</li>
<li>Moshi</li>
</ul>
</div>
>there are more ul(s)
</section>你不能添加两个变换到相同的元素(ul,type-text)，虽然你可以链许多相同的变换标签。我不明白你的最终目标是什么，但如果你想旋转div移动文本这里有一个例子。
section{
height: 100vh;
width: 130%;
overflow: hidden; }
section .type-text{
display: flex;
white-space:nowrap;
overflow: hidden;
animation: animate 5s linear infinite;
}
/* ul{transform: rotate(-30deg);} */
@keyframes animate {
0% {transform: translateX(100%) rotate(-30deg);}
100% { transform: translateX(-100%) rotate(-30deg)}
}<section class="type-hover">
<div id="anime" class="animating">
<ul class="type-text">
<li>Happy</li>
<li>Birthday</li>
<li>Angela</li>
<li>Moshi</li>
<li>Happy</li>
<li>Birthday</li>
<li>Angela</li>
<li>Moshi</li> <li>Happy</li>
<li>Birthday</li>
<li>Angela</li>
<li>Moshi</li>
<li>Happy</li>
<li>Birthday</li>
<li>Angela</li>
<li>Moshi</li>
</ul>
</div>
</section>