How to animate moving each text -30deg

Question

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>

You have a typo in your styles, two right braces before the ul instead of one. So your ul setting is ignored. Using a CSS validator can help find this sort of error. — A Haworth, May 07 '22 at 05:29

score 0 · Accepted Answer · answered May 07 '22 at 05:42

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>

How to animate moving each text -30deg

1 Answers1