animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Sequenced SplitText Animation

model output

LLaMA 4 Scout

Sequenced SplitText Animation

A 0.79T 0.19
compare with ground truth →
1<!DOCTYPE html>
2<html>
3<head>
4  <style>
5    body {
6      font-family: Arial, sans-serif;
7      background-image: linear-gradient(to bottom, #ADD8E6, #FFC5C5);
8    }
9    .text {
10      font-size: 24px;
11      font-weight: bold;
12      text-align: center;
13      margin-top: 20%;
14    }
15    .animate {
16      animation: fadeIn 2s;
17    }
18    @keyframes fadeIn {
19      0% {
20        opacity: 0;
21      }
22      100% {
23        opacity: 1;
24      }
25    }
26  </style>
27</head>
28<body>
29  <div class="text animate">Do you know CSS Animation? It's really awesome!</div>
30  <script>
31    // No JavaScript code needed for this animation
32  </script>
33</body>
34</html>