変換トリガーが途中で動作しない

Question

私が達成しようとしているのは明らかにいくつかのものをアニメーション化していますが、アニメーション自体はありません。画像はトランジションの継続時間が何であっても反転します。 SASSはちょっと新鮮なので、問題は入れ子のどこかにあると思います。

ここに私のHTMLは、あなたがtransitionimgに要素を追加したがホバーにtransformliに要素を適用する

<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

です。あなたが画像をアミノ化したい場合は、あなたのコードは、（あまりにもimgにtransformを適用）のようになります。作業codepenへ

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

Linkを。