Codesnipp.it Social Code Sharing

Steffen Franzkoch

KITT in CSS3

by Steffen Franzkoch on Feb 21, 2012

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>KITT</title> <style> @-webkit-keyframes slide { from { margin-left:5%; } 50% { margin-left:85%; } to { margin-left:5%; } } @-moz-keyframes slide { from { margin-left:5%; } 50% { margin-left:85%; } to { margin-left:5%; } } @-webkit-keyframes kitt { from { margin-left:-15%; } 50% { margin-left:105%; } to { margin-left:-15%; } } @-moz-keyframes kitt { from { margin-left:-15%; } 50% { margin-left:105%; } to { margin-left:-15%; } } body { background-color:#111; font:normal 16px Arial, sans-serif; color:#fff; } .kitt { width:1000px; position:relative; margin:100px auto; z-index:1; height:30px; border:1px solid #222; overflow:hidden; background-color:#000; } .kitt .light { -webkit-animation: kitt 2s linear infinite; -moz-animation: kitt 2s linear infinite; position:absolute; top:50%; left:0; z-index:1; width:10%; box-shadow:0 0 10px 10px rgba(255, 50, 50, 0.5); border-radius:10px; } </style> </head> <body> <div class="kitt"> <div class="light"> </div> </body> </html>

Can't see the comments? Please login first :)