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

rendered animation

pure css - tea

1
2<head>
3  <meta charset="UTF-8">
4  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5  <meta http-equiv="X-UA-Compatible" content="ie=edge">
6  <title>Document</title>
7  <link rel="stylesheet" href="style.css">
8  <link href="https://fonts.googleapis.com/css?family=Rammetto+One" rel="stylesheet">
9  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
10    crossorigin="anonymous">
11
12</head>
13
14<body>
15
16  <div class="ince-belli">
17    <div class="smoke">
18      <span class="s0">
19        <i class="fas fa-grin-beam"></i>
20      </span>
21      <span class="s1">
22        <i class="fas fa-grin-beam"></i>
23      </span>
24      <span class="s2">
25        <i class="fas fa-grin-beam"></i>
26      </span>
27      <span class="s3">
28        <i class="fas fa-grin-beam"></i>
29      </span>
30      <span class="s4">
31        <i class="fas fa-grin-beam"></i>
32      </span>
33      <span class="s5">
34        <i class="fas fa-grin-beam"></i>
35      </span>
36      <span class="s6">
37        <i class="fas fa-grin-beam"></i>
38      </span>
39    </div>
40    <div class="plate"></div>
41  </div>
42
43</body>
44