轉換不起作用，而變換觸發反正

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) 

Link到工作codepen。