CSS3 vapor trails v1

HTML

<div class="wrapper"><div class="trailer"></div></div>
<div class="wrapper"><div class="trailer"></div></div>
<div class="wrapper"><div class="trailer"></div></div>

CSS

body {padding: 30px; height: 800px;}
.wrapper {
    color: white;
    left: -110px;
    width: 80px;
    height: 80px;
    position: absolute;
    clip: rect(0px 80px 80px -600px);
}

.wrapper .trailer { 
    width: 600px; height: 80px;
    position: relative;
    right: 520px;
}

body:hover .wrapper {
  left: 500px; 
  -webkit-transition: all 750ms;
  -moz-transition: all 750ms;
}

body:hover .wrapper .trailer {
    -webkit-transition: all 2300ms;
    -moz-transition: all 2300ms;
    right: 0px;
    width: 80px;
    opacity: 0;
}
.wrapper:nth-child(1) { top: 30px; }
.wrapper:nth-child(2) { top: 130px; }
.wrapper:nth-child(3) { top: 230px; }

.wrapper:nth-child(2) .trailer { 
    background-image: -webkit-gradient(
    linear, right top, left bottom,
    color-stop(0, rgba(177,17,17,1)),
    color-stop(1, rgba(255,255,255,0)) );
    background-image: -moz-linear-gradient(
225deg,rgba(177,17,17,1),rgba(255,255,255,0) );
}
.wrapper:nth-child(1) .trailer { 
    background-image: -webkit-gradient(
    linear, right top, left bottom,
    color-stop(0, rgba(47,177,17,1)),
    color-stop(1, rgba(255,255,255,0)) );
    background-image: -moz-linear-gradient(
225deg,rgba(47,177,17,1),rgba(255,255,255,0) );
}
.wrapper:nth-child(3) .trailer { 
    background-image: -webkit-gradient(
    linear, right top, left bottom,
    color-stop(0, rgba(17,47,177,1)),
    color-stop(1, rgba(255,255,255,0)) );
    background-image: -moz-linear-gradient(
225deg,rgba(17,47,177,1),rgba(255,255,255,0) );
}

body:hover .wrapper:nth-child(1) { background-color: rgb(177,47,17); }
body:hover .wrapper:nth-child(2) { background-color: rgb(47,177,17); }
body:hover .wrapper:nth-child(3) { background-color: rgb(17,47,177); }

body:hover .wrapper:nth-child(1), body:hover .wrapper:nth-child(1) .trailer {  -moz-transition-delay: 0s; -webkit-transition-delay: 0s; }
body:hover .wrapper:nth-child(2), body:hover .wrapper:nth-child(2) .trailer {  -moz-transition-delay: 500ms; -webkit-transition-delay: 500ms;...