我的网站上有一些按钮可以保存,编辑或删除内容。我希望按钮能够弹出'弹出'在悬停时,使用CSS3动画。它在Firefox中运行良好,但在所有其他测试的浏览器(IE,Opera,Chrome和Safari)中,它无法完成动画。它只对不透明度进行过渡。
我已经搜索了谷歌熟悉的问题,但我无法找到解决方案。你有谁知道如何解决这个问题?
这是我的小提琴:http://jsfiddle.net/tqk5a74x/
HTML:
<table>
<tr>
<td class="td-buttons" rowspan="2">
<input type="submit" name="submit" class="action-icon save" value="Save" />
</td>
</tr>
</table>
CSS:
.save { background: url('https://cdn0.iconfinder.com/data/icons/gloss-basic-icons-by-momentum/16/save.png') 50% 50% no-repeat; }
.save {
text-decoration: none;
border: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.action-icon {
display:inline-block;
width:24px;
height:24px;
vertical-align: middle;
text-indent: -9999px;
white-space: nowrap;
overflow: hidden;
opacity:.5;
-webkit-transition:.2s;
transition:.2s;
}
.action-icon:hover {
-webit-animation: hover .2s;
animation: hover .2s;
-webkit-transition:.2s;
transition:.2s;
opacity:1;
}
@-webkit-keyframes hover {
0% {-webkit-background-size: 100%;}
40% {-webkit-background-size: 50%;}
75% {-webkit-background-size: 120%;}
100% {-webkit-background-size: 100%;}
}
@keyframes hover {
0% {background-size: 100%;}
40% {background-size: 50%;}
75% {background-size: 120%;}
100% {background-size: 100%;}
}
谢谢!
答案 0 :(得分:1)
你有拼写错误:
.action-icon:hover {
-webit-animation: hover .2s; /* Missing 'k' in 'webkit'*/
....
}
至于IE,我不相信background-size
是可动画的。歌剧,不是线索
对你的动画进行微小改动应如何全面发挥作用:
@keyframes hover {
0% {transform: scale(1)}
40% {transform: scale(0.5)}
75% {transform: scale(1.2)}
100% {transform: scale(1)}
}
.save {
background: url('https://cdn0.iconfinder.com/data/icons/gloss-basic-icons-by-momentum/16/save.png') 50% 50% no-repeat;
}
.save {
text-decoration: none;
border: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.action-icon {
display: inline-block;
width: 24px;
height: 24px;
vertical-align: middle;
text-indent: -9999px;
white-space: nowrap;
overflow: hidden;
opacity: .5;
-webkit-transition: .2s;
transition: .2s;
}
.action-icon:hover {
-webkit-animation: hover .2s;
animation: hover .2s;
-webkit-transition: .2s;
transition: .2s;
opacity: 1;
}
@-webkit-keyframes hover {
0% {
transform: scale(1)
}
40% {
transform: scale(0.5)
}
75% {
transform: scale(1.2)
}
100% {
transform: scale(1)
}
}
@keyframes hover {
0% {
transform: scale(1)
}
40% {
transform: scale(0.5)
}
75% {
transform: scale(1.2)
}
100% {
transform: scale(1)
}
}
&#13;
<table>
<tr>
<td class="td-buttons" rowspan="2">
<input type="submit" name="submit" class="action-icon save" value="Save" />
</td>
</tr>
</table>
&#13;