转换触发时转换不工作

Question

我想要实现的显然是动画一些东西，它正在发生，但没有动画本身。无论转换持续时间是多长，图像都会翻转。SASS对我来说有点新，所以我想问题是在筑巢或其他地方。

我的HTML

    <div class="skills">
        <span class="introduce"> Animations are cool, yay </span>
            <ul class="skills-list">
                    <li class="skill-item"> <img src="images/html5-logo.png">  </li>
                    <li class="skill-item"> <img src="images/css.png">  </li>
                    <li class="skill-item"> <img src="images/sass.png">  </li>
                    <li class="skill-item"> <img src="images/js.png">  </li>
                    <li class="skill-item"> <img src="images/jquery-logo.png">  </li>
                    <li class="skill-item"> <img src="images/pigeon.jpg">  </li>
            </ul>
    </div>

SASS

和

.skills
  margin: 20px 0 0 0
  padding: 0
  font-size: 18px
  >span
    font-size: 20px
.skills-list
  list-style: none
  color: $main-text
  display: flex
  align-items: center
  justify-content: center
  li
    text-align: left
    padding: 2px
    >img
      height: 165px
      margin-right: 4px
      transition-duration: 5s
      -webkit-transition-duration: 5s
      -webkit-transition-property: all
      transition-property: all
    &:hover
      -webkit-transform: rotate(180deg)

Answer 1

您将transition添加到img元素，但将transform应用到li元素。如果您想对图像进行修饰，您的代码应该是这样的(也将transform应用于img):

.skills-list
  ...
  li
    ...
    >img
      ...
      transition-duration: 5s
      transition-property: all
      &:hover // ->
        transform: rotate(180deg)