Animation of Arrow with Click

Question

i am absolute newbie and this is my first code:

.container_menu {
  position: relative;
  top: 0px;
  left: 0px;
  width: 25px;
  height: 25px;
}
.container_menu .line-1 {
  background-color: black;
  width: 59%;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.container_menu .line-2 {
  background-color: black;
  width: 59%;
  height: 2px;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.container_menu:hover .line-1 {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.container_menu:hover .line-2 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

<div class="container_menu">
  <div class="line-1"></div>
  <div class="line-2"></div>
</div>

How could I have a animation with click (Maybe JS?) and not with hover?

I will use it in a menu of a website.

I think I must use a JS Code. But I don't know, how I could realize. Perhaps you can help me, many thanks.

Code from https://codepen.io/defaultdave/pen/baXLPQ

Possible duplicate of [CSS3 transition on click using pure CSS](https://stackoverflow.com/questions/21919044/css3-transition-on-click-using-pure-css) — user24343, Feb 27 '19 at 18:00

score 0 · Accepted Answer · answered Feb 27 '19 at 18:36

0

https://codepen.io/Tanded/pen/OqVBPE

<div class="container" onclick="fnc(this)">
  <div class="line-1"></div>
  <div class="line-2"></div>
</div>

function fnc(el){
  el.classList.toggle("clicked");
}

add a small js function to toggle class and edit css to animate lines when they have clicked class instead of hover &:hover -> &.clicked on line 53

answered Feb 27 '19 at 18:36

Tanded

46
5

Its basicly the same thing, all you need is change the way animation starts. Currently you animation plays when you hover element with classes .hamburger.cross (https://www.w3schools.com/cssref/sel_hover.asp) Since you need to animate on click you change it to something like .hamburger.cross.active . (Active is the class you add with js). It makes animation to trigger only when element will have all 3 classes – Tanded Feb 28 '19 at 15:38
Also you forgot to add js script there – Tanded Feb 28 '19 at 15:39

Animation of Arrow with Click

1 Answers1