CSS3動畫|簡單的問題

我有以下的CSS代碼：CSS3動畫|簡單的問題

@keyframes hvr_shadow 
{ 
    from 
    { 
     box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5); 
    } 

    to 
    { 
     box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8); 
    } 
} 

@-moz-keyframes hvr_shadow /* Firefox */ 
{ 
    from 
    { 
     -moz-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5); 
    } 

    to 
    { 
     -moz-box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8); 
    } 
} 

@-webkit-keyframes hvr_shadow /* Safari and Chrome */ 
{ 
    from 
    { 
     -webkit-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5); 
    } 

    to 
    { 
     -webkit-box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8); 
    } 
} 

#gallery .fancybox 
{ 
    border: 1px solid #333; 
    display: block; 
    padding: 0; 
    margin: 0; 
    height: 138px; 
    -moz-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5); 
    -webkit-box-shadow: 0px 0px 0px rgba(60, 60, 60, 0.5); 
box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5); 
} 

#gallery .fancybox:hover 
{ 
    animation: hvr_shadow 700ms; 
    -moz-animation: hvr_shadow 700ms; /* Firefox */ 
    -webkit-animation: hvr_shadow 700ms; /* Safari and Chrome */ 
    -o-animation: hvr_shadow 700ms; /* Opera */ 
}

雖然動畫工作，經過一段時間的陰影自動返回到主設置。

如何在鼠標懸停圖像時保留動畫的設置？

在這裏你可以找到一個小提琴演示：http://jsfiddle.net/haX8j/

來源

2012-09-25 Merianos Nikos

這將解決你的問題：

-webkit-animation: hvr_shadow 700ms .1s 1 ease-in-out normal forwards; 
-moz-animation: hvr_shadow 700ms .1s 1 ease-in-out normal forwards; 
-o-animation: hvr_shadow 700ms .1s 1 ease-in-out normal forwards; 
animation: hvr_shadow 700ms .1s 1 ease-in-out normal forwards;

JS小提琴：http://jsfiddle.net/haX8j/1/

來源

2012-09-25 11:36:40

感謝您的回答！ :) –

此解決方案在Firefox中不起作用。改用我的轉換解決方案。 – JohnW

@MerianosNikos歡迎。 –

其實我覺得你最好使用過渡。這是簡單得多，它與Firefox和動過的鏈接時，它會正確地淡出：

.link 
{ 
    -moz-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5); 
    -webkit-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5); 
    box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5); 

    -moz-transition: all 0.7s; 
    -webkit-transition: all 0.7s; 
    -o-transition: all 0.7s; 
    transition: all 0.7s; 
} 
.link:hover 
{ 
    -moz-box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8); 
    -webkit-box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8); 
    box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8); 
}

這裏是一個小提琴例子。我已經使陰影變得更大，以便更清楚地看到效果：http://jsfiddle.net/DYdZs/

來源

2012-09-25 12:02:11 JohnW

CSS3動畫|簡單的問題

回答

相關問題