model output
LLaMA 4 Scout

Wave Animation Pure CSS
A 0.49T 0.11
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Training Animation</title>
7    <style>
8        /* Add some basic styling to our text */
9        .text {
10            font-family: Arial, sans-serif;
11            font-size: 48px;
12            font-weight: bold;
13        }
14
15        /* Define our animation */
16        @keyframes color-change {
17            0% {
18                color: #ff0000; /* Red */
19            }
20            100% {
21                color: #ffffff; /* White with a hint of red for gradient effect */
22            }
23        }
24
25        /* Animate the text */
26        .animate {
27            animation: color-change 4s linear infinite;
28        }
29
30        /* Gradient effect for the text */
31        .gradient {
32            background: linear-gradient(to right, #ffffff 0%, #ff0000 100%);
33            -webkit-background-clip: text;
34            -webkit-text-fill-color: transparent;
35        }
36    </style>
37</head>
38<body>
39    <div class="text animate gradient" style="text-align: center; margin-top: 20px;">TRAINING</div>
40
41    <script>
42        // Get the text element
43        const textElement = document.querySelector('.text');
44
45        // Define the animation
46        function animateText() {
47            // Reset the animation
48            textElement.style.animation = 'none';
49            // Trigger reflow
50            textElement.offsetWidth;
51            // Restart the animation
52            textElement.style.animation = 'color-change 4s linear infinite';
53        }
54
55        // Call the function to start the animation
56        animateText();
57    </script>
58</body>
59</html>