*demo*/
.demo {
border-top: 100px solid #ccc;
height: 300px;
font-family: sans-serif;
}
@keyframes grow {
0% { position: absolute;
left: -500px }
100% { position: absolute;
left: 0}
}
@-webkit-keyframes grow {
0% { left: -500px }
100% { left: 0}
}
.demo:hover .grows {
animation-name: grow;
animation-duration: 3s;
-webkit-animation-name: grow;
-webkit-animation-duration: 3s;
}
growsandstays {
position: absolute;
left: -500px;
}
.growsandstays {
animation-name: grow;
animation-duration: 3s;
animation-fill-mode: forwards;
-webkit-animation-name: grow;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
}