动画图像标签:目标

Question

我想动画图像时，他们的目标使用:target。但问题是，我的图像标签在div标签内，所以我无法瞄准img。我怎么能做到这一点，或者这是否可能?或者还有其他方法吗?

这是我的html

<div id="f">
                <img src="images/fan.png">
                <span><h1 style="text-align: center; font-size: 6em; padding: 10px;">Fan</h1></span>
            </div>

，这是我目前正在尝试做的

@keyframes  zomeIn{
     from{width: 50px; height: 50px;}
     to{width: 150px; height: 150px;}
 }
:target{
    animation-name: zomeIn;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    display: block !important;
}

Answer 1

您可以使用#f:target img来选择目标div内的图像。然后，当您单击针对该div的锚时，动画将在图像上播放。

下面是一个的实例:

@keyframes zomeIn {
    from {
        width: 50px;
        height: 50px;
    }
    to {
        width: 150px;
        height: 150px;
    }
}
#f:target img {
    animation-name: zomeIn;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    display: block !important;
}

<div id="f">
  <img src="http://i.imgur.com/LDR6AWn.png?1" width="150" height="150">
</div>
<a href="#f">Animate</a>

JSFiddle版本:https://jsfiddle.net/v77m1tod/