How to make the following animation restart on click ?

1. What is it about ?

I've got the following item that I originally found on the internet and then adapted to my own needs.

It's basically a capsule containing some text and, on click, a small green coloured element shows up on the right of the container.

Two properties are used in there :

a transition (for the green container);
an animation (for the "V" at the center of the green coloured container);

The transition works perfectly and activate each time we click and disappear each time we click again and so on, perfect.

2. What is the problem, then ?

the animation for the "V" element isn't restarting each time we click on the main container to have the small green coloured one showing up.

The animation is set to last one second but it doesn't restart.

In the html, I have experimented a bit before being able to get the following result :


  <body>
    <div >
      <div  id="entrées">
          <label>
            <article >
              <input type="checkbox" id="m__switch" value="1">
              <div >
                <div >
                  <h3 >Ravioles de foie gras</h3>
                  <p >Accompagnés de leur crème à la truffe</p>
                </div>
                <p > 25€</p>
              </div>
              <div >
                <span >check_circle</span>
              </div>       
            </article>
        </label>
      </div>  
    </div>  
  </body>

I have proceeded by creating a "check-box input" and by adding a "label" tag around the "article", that allowed me to hide the "input" and make the whole container clickable.

As you will see in the SCSS code, I had, in order to get the current effect, to operate as follow :

#m__switch:checked{
  ~.m__selection {
    opacity: 100%;
    width: 7rem;
    transition: transform 0.4s ease-in-out, width 0.4s ease-in-out, opacity 0.4s ease-in-out;
  }
}

.check__icon {
  animation: m__rotate 2s linear 3 ;
}

As you can see :

".m__selection"'s transition works with the selector written "m__switch:checked~.m__selection".
But if I do that for ".check__icon", the animation won't start at all. That's why it isn't typed in the same fashion.

Of course, you'll tell me that's why the animation doesn't restart (even though I read that restarting an animation in CSS was quite difficult, but I'm maybe wrong in my research).

I thought of using another transition but I feel a bit uneasy to see how to implement a transform rotate, my experiments with it didn't get me far...

3. So what do you want exactly ?

I would like for the "v" element in the green container to rotate each time I click on the capsule to have the element showing up. Of course, it's a checkbox. I saw a solution using a "radio" input type instead, but honestly it didn't allow me to "uncheck" and have the green container to disappear.

Thank you for reading me. today, I hope that I've been clear in my request and thank you for the help you will be able to provide,

Regards,

Elrad

CodePudding user response：

hope you are fine too.

I believe you simply put the animation at the wrong place. I copied your pen and changed it: https://codepen.io/Kathara/pen/qBoGjoJ

You added the animation on the .check__icon without it being a child/sibling of the checked element.

So instead of simply

.check__icon {
    animation: m__rotate 2s linear 1 ;
}

I moved it like this:

#m__switch:checked {
    ~.m__selection {
        .check__icon {
            animation: m__rotate 2s linear 1;
        }
    }
}

That way whenever the #m__switch changes its state to being checked the animation of the .check__icon will be triggered.

Is this what you wanted?