Jakub Małojło Jakub Małojło - 3 months ago 12
jQuery Question

Transition time not working while transform triggers anyway

what I'm trying to achieve is obviously animate some stuff and it's kinda happening, but without the animation itself. The images just flip no matter what the transition duration is. SASS is kinda new to me, so I guess the problem is laying somewhere in nesting or something.

here's my 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>


And 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

You add transition to img element but apply transform to li element on hover. If you want to aminate images, your code should look like (apply transform to img too):

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

Link to workink codepen.