'How to animate moving each text -30deg [duplicate]

I have a Problem that my text is moving x-direction instead of 30deg. I need to move the text 30deg along. I use transform: rotate (30deg) and I create keyframe animation on start transformX:100% and set end transformX=-100% but its not working. SCreenshot

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>
htmlcss


Solution 1:[1]

You cant add two transform to same element (ul,type-text) although you can chain many to same transform tag .I dont understood exactly what you end goal is but if you want rotated div with moving text here's an example.

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 rootShiv

Related Questions