動畫上懸停事件

Question

我正在使用的鼠標懸停背景漸變使用下面的造型風格的一些菜單項的CSS漸變背景：

#sidebar ul li a:hover { 
    background-image: linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%); 
    background-image: -o-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%); 
    background-image: -moz-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%); 
    background-image: -webkit-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%); 
    background-image: -ms-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%); 

    background-image: -webkit-gradient(
     linear, 
     left bottom, 
     left top, 
     color-stop(0.05, rgb(68,68,68)), 
     color-stop(1, rgb(51,51,51)) 
    ); 
    color: #f0f0f0; 
    border-top-left-radius: 4px; 
    border-bottom-left-radius: 4px; 
} 

我的問題是，是否有可能使新的背景（由漸變定義）從右側滑入使用CSS3轉換或動畫？或者我將不得不訴諸使用精靈圖像或Javascript？

Answer 1

漸變上的動畫尚不支持。然而這個網站提供了一種動畫的感覺上hover-

http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

示例CSS一個可喜的方法： -

#DemoGradient{ 
    background: -webkit-linear-gradient(#C7D3DC,#5B798E); 
    background: -moz-linear-gradient(#C7D3DC,#5B798E); 
    background: -o-linear-gradient(#C7D3DC,#5B798E); 
    background: linear-gradient(#C7D3DC,#5B798E); 

    -webkit-transition: background 1s ease-out; 
    -moz-transition: background 1s ease-out; 
    -o-transition: background 1s ease-out; 
    transition: background 1s ease-out; 

    background-size:1px 200px; 
    border-radius: 10px; 
    border: 1px solid #839DB0; 
    cursor:pointer; 
    width: 150px; 
    height: 100px; 
} 
#DemoGradient:Hover{ 
    background-position:100px; 
} 

Answer 2

看來梯度不支持轉換，但（尚）：

Use CSS3 transitions with gradient backgrounds

如果您使用背景圖片，而不是CSS3漸變，那麼你可以使用CSS過渡和縮小它的動畫。

Answer 3

試試這個爲一個黑客：

<div class="background-animate"> 
    <div class="content">Hi im content</div> 
</div> 

而且風格吧

.background-animate { 
    position: relative; 
    z-index: 10; 
    display: block; 
    background: transparent; 
} 
.background-animate:before { 
    content: ""; 
    position: absolute; 
    transition: opacity .35s ease-in-out; 
    -moz-transition: opacity .35s ease-in-out; 
    -webkit-transition: opacity .35s ease-in-out; 
    top:0; left: 0; right: 0; bottom: 0; z-index:-1; 
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 40%, #e9eae9 100%); /* FF3.6-15 */ 
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 40%,#e9eae9 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: radial-gradient(ellipse at center, #ffffff 40%,#e9eae9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
} 
.background-animate:hover:before { 
    opacity: 0; 
} 
.background-animate:after { 
    content: ""; opacity: 0; 
    transition: opacity .35s ease-in-out; 
    -moz-transition: opacity .35s ease-in-out; 
    -webkit-transition: opacity .35s ease-in-out; 
    position: absolute; 
    top:0; left: 0; right: 0; bottom: 0; z-index:-1; 
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 80%, #e9eae9 100%); /* FF3.6-15 */ 
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 80%,#e9eae9 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: radial-gradient(ellipse at center, #ffffff 80%,#e9eae9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
} 
.background-animate:hover:after { 
    opacity: 1; 
} 

它基本上會在漸變之間進行不透明切換。演示這裏https://codepen.io/anon/pen/eWOEoR