我有以下 CSS 代码:
@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 */
}
当动画运行时,一段时间后阴影自动返回初始设置。
如何在鼠标悬停在图像上时保持动画设置?
在这里你可以找到一个 fiddle 演示:http://jsfiddle.net/haX8j/
最佳答案
这将解决您的问题:
-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 fiddle : http://jsfiddle.net/haX8j/1/
关于animation - CSS3 动画 |简单问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12581940/