Animation of Arrow with Click - css

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

Answer 1

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