我正在尝试进行一个Web转换,它以插入框阴影开始,结束于外框阴影.下面的jsfiddle显示了这个例子.问题是正常插入无框阴影网络转换工作但插入外部不起作用.
HTML
<div class="greyrow">
good transition
</div>
<br/>
<br/>
<div class="whiterow">
no transition
</div>
CSS
.greyrow{
height:100px;
width:250px;
padding:10px;
border:1px solid #CCCCCC;
margin-bottom: 10px;
-moz-Box-shadow: inset 0 0 10px #aaa;
-webkit-Box-shadow: inset 0 0 10px #aaa;
Box-shadow: inner 0 0 10px #aaa;
}
.greyrow:hover{
-moz-Box-shadow: none;
-webkit-Box-shadow: none;
Box-shadow: none;
-webkit-transition: -webkit-Box-shadow 1s;
-moz-transition: -moz-Box-shadow 1s;
-o-transition: -o-Box-shadow 1s;
transition: Box-shadow 1s;
}
.whiterow{
height:100px;
width:250px;
padding:10px;
border:1px solid #CCCCCC;
margin-bottom: 10px;
-moz-Box-shadow: inset 0 0 10px #aaa;
-webkit-Box-shadow: inset 0 0 10px #aaa;
Box-shadow: inner 0 0 10px #aaa;
}
.whiterow:hover{
-moz-Box-shadow: 0 0 10px #aaa;
-webkit-Box-shadow: 0 0 10px #aaa;
Box-shadow: 0 0 10px #aaa;
-webkit-transition: -webkit-Box-shadow 2s;
-moz-transition: -moz-Box-shadow 2s;
-o-transition: -o-Box-shadow 2s;
transition: Box-shadow 2s;
}
解决方法
如果您在插入和开始阴影之间切换之前首先设置为无动画,则可以非常接近关键帧. (你不能直接为它设置动画,因为它们是关键字而不是数字值 – 即没有“almostInset”阴影).
考虑以下css：
.Box { Box-shadow: inset 0 0 10px #aaa; /*add prefixes*/animation: shadowFadeOut 1s; } .Box:hover { Box-shadow: 0 0 10px #aaa; /*add prefixes*/animation: shadowFadeIn 1s; } @/*add prefixes*/keyframes shadowFadeIn { 0% { Box-shadow: inset 0 0 10px #aaa; } 50% { Box-shadow: none; } 100% { Box-shadow: 0 0 10px #aaa; } } @/*add prefixes*/keyframes shadowFadeOut { 0% { Box-shadow: 0 0 10px #aaa; } 50% { Box-shadow: none; } 100% { Box-shadow: inset 0 0 10px #aaa; } }
Webkit演示版：http://jsfiddle.net/xq4qc/1/
我能想到的一个缺点是,它还会在第一页加载时为阴影设置动画.
