css text scroll loop

Solutions on MaxInterview for css text scroll loop by the best coders in the world

showing results for - "css text scroll loop"

13 Jan 2018

1<body>
2    <style>
3        .container {
4            border: 1px solid black;
5            width: 50vmin;
6            height: 3vh;
7            overflow: hidden;
8            white-space: nowrap;
9        }
10        
11        .text {
12            position: relative;
13        }
14        
15        .text :nth-child(1) {
16            position: absolute;
17            animation: scroll-left 5s linear infinite;
18        }
19        
20        .text :nth-child(2) {
21            position: absolute;
22            animation: scroll-left-offset 5s linear infinite;
23        }
24        
25        @keyframes scroll-left {
26            0% {
27                transform: translateX(0%);
28            }
29            100% {
30                transform: translateX(-110%);
31            }
32        }
33        
34        @keyframes scroll-left-offset {
35            0% {
36                transform: translateX(110%);
37            }
38            100% {
39                transform: translateX(0%);
40            }
41        }
42    </style>
43    <div class="container">
44        <div class="text">
45            <div>A very loooooooooooooooooong soooooooooooooooooong title</div>
46            <div>A very loooooooooooooooooong soooooooooooooooooong title</div>
47        </div>
48    </div>
49</body>