je besoin d'aide pour faire de l'animation comme gradient linéaire en utilisant CSS qui se termine par la couleur transparente sur l'image ..Animer gradient linéaire se termine par la couleur transparente en utilisant CSS
Ceci est un exemple (si possible):
Effet actuel obtenu en créant un dégradé linéaire transparent-blanc-transparent et un arrière-plan en mouvement avant/arrière sur :hover.
Voici la solution pour placer l'image sous cette animation. mais s'il vous plaît garder à l'esprit animation sans fin pourrait être très distrayant et ennuyeux pour vos utilisateurs
.wrapper {
position: relative;
width: 350px;
height: 150px;
/*border: 2px solid #444;*/
border-radius: 10px;
overflow: hidden;
}
img {
position: relative;
z-index: 0;
width: 100%;
}
.gradient {
transition: background-position .5s;
background-size: 200% auto;
box-shadow: 0 0 20px #eee;
font: 0;
position: absolute;
z-index: 1;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.gradient {
background-image: linear-gradient(to top, transparent 0%, white 51%, transparent 100%);
background-position: center bottom;
}
.gradient:hover {
background-position: center top;
}
.gradient.animated {
animation: gradient 2s infinite;
}
@keyframes gradient {
0% {
background-position: center bottom;
}
50% {
background-position: center top;
}
100% {
background-position: center bottom;
}
}<div class='wrapper'>
<div href='#' class='gradient'></div>
<img src='http://lorempixel.com/350/150/sports/' />
</div>
<div class='wrapper'>
<div href='#' class='gradient animated'></div>
<img src='http://lorempixel.com/350/150/sports/' />
</div>et exemple simplier pour une meilleure compréhension
vous pouvez trouver plus à l'article ci-dessous
.gradiented {
transition: background-position .5s;
background-size: 200% auto;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
width: 200px;
height: 200px;
}
.gradiented {
background-image: linear-gradient(to top, #283048 0%, #859398 51%, #283048 100%);
background-position: center bottom;
}
.gradiented:hover {
background-position: center top;
}<div href='#' class='gradiented'></div>peut me dire comment puis-je faire jouer l'animation automatique (sans la souris sur l'image)? –
@AliH édité, voir le 1er extrait – godblessstrawberry
@AliH yw, s'il vous plaît garder à l'esprit l'animation sans fin pourrait être très distrayant et ennuyeux pour vos utilisateurs – godblessstrawberry
@Paulie_D ne est pas un double de la question mentionnée – godblessstrawberry