Jakub Małojło Jakub Małojło - 1 year ago 87
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)

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download