Html 在：目标上设置图像标记的动画

我想在使用：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>

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

下面是一个活生生的例子：

@关键帧zomeIn{ 从{ 宽度：50px； 高度：50px； } 到{ 宽度：150px； 高度：150像素； } } f：目标img{ 动画名称：zomeIn； 动画持续时间：5s； 动画迭代次数：1； 动画计时功能：线性； 显示：块！重要； }

---

你能发布你当前的代码让我们检查一下是否可行吗？旋转一把小提琴，让我们看看你在做什么。@ManojKumar请看我更新的问题。@nykc请看我更新的问题。我有多个div包含像上面这样的img，那么我该如何定位？就我而言，它不起作用。我会尝试给所有的div设置一个类似imgContainer的类。那么对于CSS，您可以使用.img容器：target img.only.img容器：target正在工作，当我放置.img容器：target img时，它不工作吗？有什么想法吗？@Adamnick这里有一个建议。告诉我你是否可以在你的代码中使用它，如果不能的话，如果你用一个JSFIDLE和一些你希望它如何工作的细节来回答，那将是很有帮助的。谢谢

@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;
}