Question

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

真的很奇怪。我在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{

Answer 2

您应该在 .siteLogo_ani 类中将 display：block; 放在动画中。它没有工作，因为它有一个显示：默认为内联，并且没有准确的宽度或高度传递给它的子元素。

Answer 3

首先，在提及this thread时，您无法通过动画使用display属性。因此，我会将display属性抽象为.siteLogo_ani（我也将结束宽度也放在该类中），如下所示：

.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;

    display: block;
    float: left;
    width: 160px;
}

这将使您的关键帧可以自由地仅操作一个或两个属性（并且通过将您的宽度放在原始类中，关键帧以该样式结束并将保留在那里）：

@-webkit-keyframes asdf{
    from { width:355px; }
    to   { width:160px; }
}
@keyframes asdf{
    from { width:355px; }
    to   { width: 160px; }
}

#siteLogo img { width:100%; }

通过这种方式，它可以实现更简单的动画效果，并且可以减少操作（我还取出了一堆高度，因此图像不会失去宽高比）。

检查出来：http://jsfiddle.net/m93gLw7o/8/

为什么我的CSS动画不起作用？

3 个答案: