Rotating clockwise 180 then 360

Question

I have a cog icon that I want to spin clockwise 180deg when activated (class="cards__cog cards__cog-active") and then spin another 180deg clockwise to return to its deactivated state (class="cards__cog cards__cog-inactive"). I am doing this with React, reacting to a change in the state when the cog is clicked.

The below works but my problems are:

1) It animates on page load (which makes sense because it has the cards__cog-inactive class but what is the alternative?).

2) It is ugly and there must be an easier way.

Thank you

.cards {
    &__cog {
            position: absolute;
            right: 20px;
            top: 20px;
            width: 10vh;
            cursor: pointer;

            &-active {
                 animation: rotate180 1s ease;
                animation-fill-mode: forwards;
            }
            &-inactive {
                animation: rotate180to359to0 1s ease;
                animation-fill-mode: forwards;
            }
       }
}


    @keyframes rotate180 {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(180deg);
      }
    }

    @keyframes rotate180to359to0 {
      0% {
        transform: rotate(180deg);
      }
      99% {
        transform: rotate(359deg);
      }
      100% {
        transform: rotate(0deg);
      }
    }

user_1926369 · Answer

You can use transition for one of the movements. But not for both, because then one of them goes backwards.

And you can not use an animation for the initial state, because of you problem number one.

This leaves us with the inactive state being at 360 degrees, so that it can transition from 180 to 360 in the correct way, and an animation to go from 0 to 180 for the change from inactive to active

function change () {

 var elem = document.getElementById("test");
 elem.classList.toggle('active');
}

.test {
  width: 200px;
  height: 100px;
  border: solid 4px red;
  margin: 20px;
  transform: rotate(360deg);
  transition: transform 1s;
}

.active {
  animation: activate 1s;
  transform: rotate(180deg);
}

@keyframes activate {
  from {transform: rotate(0deg);}
  to {transform: rotate(180deg);}
}

TEST

user_10319970 · Answer

You've mentioned that you're using React. Considering this you could try to move rotation logic from css into component itself. Doing so you won't need additional classes, keyframes, etc. Only transition and transform combo is needed in this scenario.

class Cog extends React.Component {
  state = {
    isActive: false,
    togglesCount: 0
  }
  
  get rotationValue () {
    return `${this.state.togglesCount * 180}deg`
  }
  
  get cogStyle () {
    return {
      transition: 'transform 1s',
      transform: `rotateZ(${this.rotationValue})`
    }
  }
  
  toggle = () => {
    this.setState(s => ({ 
      isActive: !s.isActive,
      togglesCount: ++s.togglesCount
    }))
  }
  
  render() {
    return (
      
    ) 
  }
}


ReactDOM.render(, document.getElementById('root'))

For a css-only solution you could use transition and rotateY(-180deg) hack on a parent element:

.icon { display: inline-block; } .icon__inner { transition: transform 1s; } input:checked + .icon { transform: rotateY(-180deg); } input:checked + .icon .icon__inner { transform: rotateZ(-180deg); }

user_8620333 · Answer

If your icon is symmetrical, you can consider 2 elements and transition like this.

var e = document.querySelector('.box');
e.addEventListener('click',function() {
  e.classList.toggle('active');
})

.box {
  display:inline-block;
  margin:20px;
  transition:0s .5s;
}
.box > i {
  transition:.5s;
  color:red;
  display:block;
}
.box.active {
  transform:scaleX(-1);
}

.box.active i{
  transform:rotate(180deg);
}

user_7897395 · Answer

This is yet another answer. Since I don't have the cog I use a triangle

toggle.addEventListener("click", () => {
cog.className = (cog.className == "" || cog.className == "inactive") ? "active" : "inactive"
});

#cog{
  margin:0 auto;
  width:108px;
  outline:1px solid;
  transform-origin: 54px 108px;
}

#triangle{
  outline:1px solid;
  border:25px solid transparent;
  border-bottom:100px solid green;
  width:0px;
  height:1px;
  position:relative;
  margin:auto;
}

#triangle::before{
  content:"";
  width:16px; 
  height:16px;
  background:red;
  display:block;
  position:absolute;
  bottom:-108px;
  left:-8px;
  border-radius:50%;
}


 @keyframes rotate1 {
      100% {
        transform: rotate(180deg);
      }
    }

 @keyframes rotate2 {
       0% {
        transform: rotate(180deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

#cog.active{animation: rotate1 1s ease;
            animation-fill-mode: forwards;}

#cog.inactive{animation: rotate2 1s ease;
            animation-fill-mode: forwards;}

user_650881 · Answer

Since you are using React, you may prefer to use a Component. Keeping your use of ); } } ReactDOM.render( , document.getElementById('root'));

button {
  margin: 10px;
  font-size: 20pt;
  color: red;
}

button img {
  padding: 10px;
  vertical-align: middle;
}

.active {
  color: green;
}

.active img {
  transform: rotate(180deg);
}

@keyframes rotate-to-180 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(180deg); }
}

@keyframes rotate-from-180 {
  from { transform: rotate(180deg); }
  to   { transform: rotate(360deg); }
}

Rotating clockwise 180 then 360

5 Answers