動畫線性梯度使用CSS

Question

我需要幫助使用CSS與使圖像透明色結束像線性梯度的動畫製作..

這是一個例子（如果可能）以透明色結束

Answer 1

通過在:hover上創建線性漸變透明白色透明和移動背景向前/向後實現的當前效果。

這裏的解決方案將圖像放置在此動畫下。但請記住，無盡的動畫可能非常分散注意力和惱人的爲你的用戶

.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>

，並更好地理解

你可以找到更多的文章下面

simplier例子

w3schools about CSS3 Gradients

.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>