1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 background:gold; 9 } 10 11 .circle { 12 position:absolute; 13 left:0; 14 top:0; 15 90px; 16 height:90px 17 18 } 19 .circle div { 20 position:absolute; 21 top:50%; 22 left:50%; 23 background:#fff; 24 90px; 25 height:90px; 26 margin-left:-45px; 27 margin-top:-45px; 28 opacity:1; 29 border-radius:90px; 30 -webkit-animation-duration:1.2s; 31 -webkit-animation-timing-function:linear; 32 -webkit-animation-iteration-count:infinite; 33 -ms-animation-duration:1.2s; 34 -ms-animation-timing-function:linear; 35 -ms-animation-iteration-count:infinite; 36 -moz-animation-duration:1.2s; 37 -moz-animation-timing-function:linear; 38 -moz-animation-iteration-count:infinite; 39 -o-animation-duration:1.2s; 40 -o-animation-timing-function:linear; 41 -o-animation-iteration-count:infinite; 42 animation-duration:1.2s; 43 animation-timing-function:linear; 44 animation-iteration-count:infinite; 45 } 46 .circle div.c1 { 47 20px; 48 height:20px; 49 margin-left:-10px; 50 margin-top:-10px; 51 opacity:1; 52 border-radius:90px 53 } 54 .circle div.c2 { 55 -webkit-animation-name:c2; 56 -webkit-animation-delay:.6s; 57 -ms-animation-name:c2; 58 -ms-animation-delay:.6s; 59 -moz-animation-name:c2; 60 -moz-animation-delay:.6s; 61 -o-animation-name:c2; 62 -o-animation-delay:.6s; 63 /*! animation-name:c2; *//*! animation-delay:.6s */ 64 } 65 .circle div.c3 { 66 -webkit-animation-name:c2; 67 -webkit-animation-delay:1.2s; 68 -ms-animation-name:c2; 69 -ms-animation-delay:1.2s; 70 -moz-animation-name:c2; 71 -moz-animation-delay:1.2s; 72 -o-animation-name:c2; 73 -o-animation-delay:1.2s; 74 /*! animation-name:c2; *//*! animation-delay:1.2s */ 75 } 76 @-webkit-keyframes c2 { 77 0% { 78 -webkit-transform:scale(.222); 79 -ms-transform:scale(.222); 80 -moz-transform:scale(.222); 81 -o-transform:scale(.222); 82 transform:scale(.222); 83 opacity:1 84 } 85 50% { 86 -webkit-transform:scale(.622); 87 -ms-transform:scale(.622); 88 -moz-transform:scale(.622); 89 -o-transform:scale(.622); 90 transform:scale(.622); 91 opacity:.4 92 } 93 98% { 94 -webkit-transform:scale(1); 95 -ms-transform:scale(1); 96 -moz-transform:scale(1); 97 -o-transform:scale(1); 98 transform:scale(1); 99 opacity:.2 100 } 101 100% { 102 opacity:0 103 } 104 } 105 @-ms-keyframes c2 { 106 0% { 107 -webkit-transform:scale(.222); 108 -ms-transform:scale(.222); 109 -moz-transform:scale(.222); 110 -o-transform:scale(.222); 111 transform:scale(.222); 112 opacity:1 113 } 114 50% { 115 -webkit-transform:scale(.622); 116 -ms-transform:scale(.622); 117 -moz-transform:scale(.622); 118 -o-transform:scale(.622); 119 transform:scale(.622); 120 opacity:.4 121 } 122 98% { 123 -webkit-transform:scale(1); 124 -ms-transform:scale(1); 125 -moz-transform:scale(1); 126 -o-transform:scale(1); 127 transform:scale(1); 128 opacity:.2 129 } 130 100% { 131 opacity:0 132 } 133 } 134 @-moz-keyframes c2 { 135 0% { 136 -webkit-transform:scale(.222); 137 -ms-transform:scale(.222); 138 -moz-transform:scale(.222); 139 -o-transform:scale(.222); 140 transform:scale(.222); 141 opacity:1 142 } 143 50% { 144 -webkit-transform:scale(.622); 145 -ms-transform:scale(.622); 146 -moz-transform:scale(.622); 147 -o-transform:scale(.622); 148 transform:scale(.622); 149 opacity:.4 150 } 151 98% { 152 -webkit-transform:scale(1); 153 -ms-transform:scale(1); 154 -moz-transform:scale(1); 155 -o-transform:scale(1); 156 transform:scale(1); 157 opacity:.2 158 } 159 100% { 160 opacity:0 161 } 162 } 163 @-o-keyframes c2 { 164 0% { 165 -webkit-transform:scale(.222); 166 -ms-transform:scale(.222); 167 -moz-transform:scale(.222); 168 -o-transform:scale(.222); 169 transform:scale(.222); 170 opacity:1 171 } 172 50% { 173 -webkit-transform:scale(.622); 174 -ms-transform:scale(.622); 175 -moz-transform:scale(.622); 176 -o-transform:scale(.622); 177 transform:scale(.622); 178 opacity:.4 179 } 180 98% { 181 -webkit-transform:scale(1); 182 -ms-transform:scale(1); 183 -moz-transform:scale(1); 184 -o-transform:scale(1); 185 transform:scale(1); 186 opacity:.2 187 } 188 100% { 189 opacity:0 190 } 191 } 192 @keyframes c2 { 193 0% { 194 -webkit-transform:scale(.222); 195 -ms-transform:scale(.222); 196 -moz-transform:scale(.222); 197 -o-transform:scale(.222); 198 transform:scale(.222); 199 opacity:1 200 } 201 50% { 202 -webkit-transform:scale(.622); 203 -ms-transform:scale(.622); 204 -moz-transform:scale(.622); 205 -o-transform:scale(.622); 206 transform:scale(.622); 207 opacity:.4 208 } 209 98% { 210 -webkit-transform:scale(1); 211 -ms-transform:scale(1); 212 -moz-transform:scale(1); 213 -o-transform:scale(1); 214 transform:scale(1); 215 opacity:.2 216 } 217 100% { 218 opacity:0 219 } 220 } 221 </style> 222 </head> 223 <body> 224 <div class="circle"> 225 226 <div class="c1"></div> 227 <div class="c2"></div> 228 <div class="c3"></div> 229 </div> 230 </body> 231 </html>