animation.html (3321B)
1 <!DOCTYPE html> 2 <style> 3 .not-animated { 4 display: inline-block; 5 6 width: 50px; 7 height: 50px; 8 border-radius: 50%; 9 background: #eee; 10 } 11 12 .simple-animation { 13 display: inline-block; 14 15 width: 64px; 16 height: 64px; 17 border-radius: 50%; 18 background: red; 19 20 animation: move 200s infinite; 21 } 22 23 .multiple-animations { 24 display: inline-block; 25 26 width: 50px; 27 height: 50px; 28 border-radius: 50%; 29 background: #eee; 30 31 animation: move 200s infinite , glow 100s 5; 32 animation-timing-function: ease-out; 33 animation-direction: reverse; 34 animation-fill-mode: both; 35 } 36 37 .transition { 38 display: inline-block; 39 40 width: 50px; 41 height: 50px; 42 border-radius: 50%; 43 background: #f06; 44 45 transition: width 500s ease-out; 46 } 47 .transition.get-round { 48 width: 200px; 49 } 50 51 .long-animation { 52 display: inline-block; 53 54 width: 50px; 55 height: 50px; 56 border-radius: 50%; 57 background: gold; 58 59 animation: move 100s; 60 } 61 62 .short-animation { 63 display: inline-block; 64 65 width: 50px; 66 height: 50px; 67 border-radius: 50%; 68 background: purple; 69 70 animation: move 1s; 71 } 72 73 .delayed-animation { 74 display: inline-block; 75 76 width: 50px; 77 height: 50px; 78 border-radius: 50%; 79 background: rebeccapurple; 80 81 animation: move 200s 5s infinite; 82 } 83 84 .delayed-transition { 85 display: inline-block; 86 87 width: 50px; 88 height: 50px; 89 border-radius: 50%; 90 background: black; 91 92 transition: width 500s 3s; 93 } 94 .delayed-transition.get-round { 95 width: 200px; 96 } 97 98 .delayed-multiple-animations { 99 display: inline-block; 100 101 width: 50px; 102 height: 50px; 103 border-radius: 50%; 104 background: green; 105 106 animation: move .5s 1s 10, glow 1s .75s 30; 107 } 108 109 .multiple-animations-2 { 110 display: inline-block; 111 112 width: 50px; 113 height: 50px; 114 border-radius: 50%; 115 background: blue; 116 117 animation: move .5s, glow 100s 2s infinite, grow 300s 1s 100; 118 } 119 120 .all-transitions { 121 position: absolute; 122 top: 0; 123 right: 0; 124 width: 50px; 125 height: 50px; 126 background: blue; 127 transition: all .2s; 128 } 129 .all-transitions.expand { 130 width: 200px; 131 height: 100px; 132 } 133 134 .button-animation { 135 animation: glow 5s infinite alternate; 136 } 137 138 @keyframes move { 139 100% { 140 transform: translateY(100px); 141 } 142 } 143 144 @keyframes glow { 145 100% { 146 background: yellow; 147 } 148 } 149 150 @keyframes grow { 151 100% { 152 width: 100px; 153 } 154 } 155 </style> 156 <div class="not-animated"></div> 157 <div class="simple-animation"></div> 158 <div class="multiple-animations"></div> 159 <div class="transition"></div> 160 <div class="long-animation"></div> 161 <div class="short-animation"></div> 162 <div class="delayed-animation"></div> 163 <div class="delayed-transition"></div> 164 <div class="delayed-multiple-animations"></div> 165 <div class="multiple-animations-2"></div> 166 <div class="all-transitions"></div> 167 <!-- We need this to be a button to assert fix for Bug 2001562 --> 168 <button class="button-animation"></button> 169 <script type="text/javascript"> 170 "use strict"; 171 // Get the transitions started when the page loads 172 addEventListener("load", function() { 173 document.querySelector(".transition").classList.add("get-round"); 174 document.querySelector(".delayed-transition").classList.add("get-round"); 175 }); 176 </script>