Estoy empezando con CSS y quería hacer una cosa, pero estoy buscando por internet y no consigo exactamente lo que quiero. Mi intención es poner una fila de unos 10 círculos, y que se vayan rellenando con un efecto animado cuando el usuario entre en la página, no que simplemente cambien de color, si no que haya un efecto de "relleno", de izquierda a derecha. Además, quiero que el efecto sea permanente y que se inicie al entrar en la página, sin necesidad de pasar el ratón por encima. Sería algo parecido al efecto "sweep to right" de esta página:
http://ianlunn.github.io/Hover/
Os dejo el código del ejemplo por si sirve de ayuda:
Código HTML:
/* Sweep To Right */
.hvr-sweep-to-right {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2098d1;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
color: white;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
