| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width"> |
| |
| <title>Main and impl thread CSS animation</title> |
| |
| <style> |
| #outer { |
| width: 200px; |
| height: 200px; |
| background: orange; |
| overflow: hidden; |
| -webkit-animation: anim-size 2s alternate infinite; |
| |
| font-size: 8px; |
| } |
| #inner { |
| width: 100px; |
| height: 100px; |
| background: teal; |
| -webkit-animation: anim-xform 2s alternate infinite; |
| |
| position: absolute; |
| } |
| |
| @-webkit-keyframes anim-size |
| { |
| from {-webkit-transform: translate3d(50px, 50px, 0px);} |
| to {height: 300px; width: 300px; -webkit-transform: translate3d(0px, 0px, 0px);} |
| } |
| |
| @-webkit-keyframes anim-xform |
| { |
| from {-webkit-transform: translate3d(50px, 50px, 0px);} |
| to {-webkit-transform: translate3d(100px, 100px, 0px);} |
| } |
| </style> |
| </head> |
| <body> |
| |
| <h1>Main and impl thread CSS animation</h1> |
| |
| <div id="outer"> |
| <div id="inner"> |
| This box shouldn't move. |
| </div> |
| The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. |
| |
| Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. |
| |
| Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. |
| |
| Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. |
| |
| Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! "Now fax quiz Jack! " my brave ghost pled. |
| |
| Five quacking zephyrs jolt my wax bed. Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. |
| |
| A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox. |
| |
| The jay, pig, fox, zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for luck. |
| |
| A wizard's job is to vex chumps quickly in fog. Watch "Jeopardy! ", Alex Trebek's fun TV quiz game. Woven silk pyjamas exchanged for blue quartz. |
| |
| Brawny gods just flocked up to quiz and vex him. Adjusting quiver and bow, Zompyc[1] killed the fox. My faxed joke won a pager in the cable TV quiz show. |
| |
| Amazingly few discotheques provide jukeboxes. My girl wove six dozen plaid jackets before she quit. Six big devils from Japan quickly forgot how to waltz. |
| |
| Big July earthquakes confound zany experimental vow. Foxy parsons quiz and cajole the lovably dim wiki-girl. |
| |
| Have a pick: twenty six letters - no forcing a jumbled quiz! Crazy Fredericka bought many very exquisite opal jewels. |
| |
| Sixty zippers were quickly picked from the woven jute bag. A quick movement of the enemy will jeopardize six gunboats. |
| |
| All questions asked by five watch experts amazed the judge. Jack quietly moved up front and seized the big ball of wax. The quick, brown fox jumps over a lazy dog. |
| |
| |
| </div> |
| |
| </body> |
| </html> |