当前位置：首页 → 问答吧 → css3 animation是否支持background-image

css3 animation是否支持background-image

时间：2011-08-19

来源：互联网

@-webkit-keyframes my{
0%{ background-color:#900; }
5%{ background-color:#930; }
8%{ background-color:#960; }
11%{ background-color:#990; }
100%{ background-color:#0FF;}
}
div:hover{
-webkit-animation-name:my;
-webkit-animation-duration:20s;
-webkit-animation-timing-function:linear;
}
此css运行没有问题，但是
@-webkit-keyframes my{
0%{ background-image: url(next/5.png);}
5%{ background-image:url(next/4.png);}
8%{ background-image:url(next/3.png);}
11%{ background-image:url(next/2.png);}
100%{ background-image:url(next/1.png);}
}
div:hover{
-webkit-animation-name:my;
-webkit-animation-duration:20s;
-webkit-animation-timing-function:linear;
}
当我改为background-image后却运行不了不知道各位有没有研究过能否帮小弟解答。。。

作者: 0zhang9 发布时间: 2011-08-19

不可以这样的，W3C关于transition-property属性的说法，background-image只支持渐变形式的：

引用:

CSS属性改变的对象
background-color 色彩
background-image 只是渐变
background-position 百分比，长度
border-bottom-color 色彩
border-bottom-width 长度
border-color 色彩
border-left-color 色彩
border-left-width 长度
border-right-color 色彩
border-right-width 长度
border-spacing 长度
border-top-color 色彩
border-top-width 长度
border-width 长度
bottom 百分比，长度
color 色彩
crop 百分比
font-size 百分比，长度
font-weight 数字
grid-* 数量
height 百分比，长度
left 百分比，长度
letter-spacing 长度
line-height 百分比，长度，数字
margin-bottom 长度
margin-left 长度
margin-right 长度
margin-top 长度
max-height 百分比，长度
max-width 百分比，长度
min-height 百分比，长度
min-width 百分比，长度
opacity 数字
outline-color 色彩
outline-offset 整数
outline-width 长度
padding-bottom 长度
padding-left 长度
padding-right 长度
padding-top 长度
right 百分比，长度
text-indent 百分比，长度
text-shadow 阴影
top 百分比，长度
vertical-align 百分比，长度，关键词
visibility 可见性
width 百分比，长度
word-spacing 百分比，长度
z-index 正整数
zoom 数字

详见：http://www.w3.org/TR/css3-transitions/#properties-from-css-

[ 本帖最后由 baihe107 于 2011-8-19 16:50 编辑 ]

作者: baihe107 发布时间: 2011-08-19