web-dev-qa-db-fra.com

Transition de la couleur d'arrière-plan via une animation vers le haut

J'essaie de changer la couleur d'arrière-plan d'un élément en survol en utilisant des transitions CSS. Je veux le faire en le faisant défiler vers le bas. Je peux estomper l'arrière-plan en l'utilisant, mais j'aimerais qu'il glisse vers le haut:

-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;  
transition: background-color 0.5s linear;

Une autre pensée, serait-il préférable de faire défiler un élément distinct avec l'arrière-plan appliqué?

csscss3css-transitions
19
David Jones

Afin de faire glisser la couleur d'arrière-plan vers le haut , vous devez utiliser une image d'arrière-plan ou un dégradé quelconque, tout en ajustant progressivement le background-position:

.box {
    width: 200px; height: 100px;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, red 50%, black 50%);
    transition: background-position 1s;
}

.box:hover {
    background-position: 0 -100%;
}

Vous pouvez voir cette démo ici: http://jsfiddle.net/as5ZU/

69
Sampson