Jakub Małojło Jakub Małojło - 2 months ago 5x
HTML Question

Transition 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>


margin: 20px 0 0 0
padding: 0
font-size: 18px

font-size: 20px

list-style: none
color: $main-text
display: flex
align-items: center
justify-content: center
text-align: left
padding: 2px
height: 165px
margin-right: 4px
transition-duration: 5s
-webkit-transition-duration: 5s
-webkit-transition-property: all
transition-property: all
-webkit-transform: rotate(180deg)


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):

      transition-duration: 5s
      transition-property: all
      &:hover // ->
        transform: rotate(180deg)

Link to workink codepen.