动画图像标签上：目标

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/