<!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>