css - 为什么我的 CSS 动画不工作？

Question

http://jsfiddle.net/m93gLw7o/

上面的链接是我的代码地址。

这真的很奇怪。我在 w3school 学习，我认为我的代码中没有错误的句子。

为什么这段代码不起作用？

下面是代码。

html

<a id="siteLogo" class="siteLogo_ani" href="./">
    <img src="http://goo.gl/QafDup">
</a>

CSS

.siteLogo_ani {
    -webkit-animation-name: asdf;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-delay: 1;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;

    animation-name: asdf;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay:1;
    animation-iteration-count: 1;
    animation-direction: normal;
}

@-webkit-keyframes asdf{
    from {float: left; width:355px; height:150px; display:block;}
    to   {float: left; width:160px; height:50px; display:block;}
}
@keyframes asdf{
    from {float: left; width:355px; height:150px; display:block;}
    to   {float: left; width:160px; height:50px; display:block;}
}

#siteLogo img{width:100%; height:100%;}

Answer 1

因为您正在为“a”标签而不是图像制作动画，所以请在此处检查 CSS: http://jsfiddle.net/m93gLw7o/1/您可以看到我添加了“img”标签选择器。像这样:

.siteLogo_ani img{