如何使单个图像具有CSS动画？

Question

我正在尝试使html网站上的许多图像中的单个图像具有旋转动画。 到目前为止，当我尝试这样做时，旋转动画将应用于站点上的所有图像。 这是我的一些代码。 （我在网站上还有很多其他图片，我只是想使torqafflogo.png图片旋转。）

HTML：

<center> <img src="torqafflogo.png" width="215" height="215"> </center>

CSS：

 img {
  border-radius: 0%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

Answer 1

向该特定图像添加class / id ，然后通过CSS向具有该特定class / id图像添加样式

例如（使用班级）：

HTML：

<center> <img class="spinImage" src="torqafflogo.png" width="215" height="215"> </center>

CSS：

img.spinImage {
  border-radius: 0%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
img.spinImage:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

如果这是现在和在可预见的将来要应用这些动画的唯一图像，请使用id 。

如果使用class ，则无论给出哪个图像，特定的class都会具有这些动画。

就我个人而言，我更喜欢使用class因为这样可以在需要时轻松地将功能扩展到更多此类图像。

Answer 2

CSS : 
body {
  background: #24aecd;
}

.monster {
  width: 190px;
  height: 240px;
  margin: 2% auto;
  background: url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center;
  animation: play .8s steps(10) infinite;
}

@keyframes play {
    100% { background-position: -1900px; }
}

HTML : 
<div class="monster"></div>

Check wokring example here  :https://codepen.io/Guilh/pen/yldGp

Answer 3

将id添加到此img ，然后将img选择器替换为# 。

HTML：

<center><img id="torqafflogo" src="torqafflogo.png" width="215" height="215"></center>

CSS：

#torqafflogo {
  border-radius: 0%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}

#torqafflogo:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}