Radio button animation , transition not working-CodePudding

.container3 {
  padding: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container3 .materiali {
  padding: 8px 48px;
  margin: 8px;
  font-family: Baskerville;
  font-size: 25px;
}

input[type="radio"] {
  display: none;
}

label {
  position: relative;
}

label::before {
  content: "";
  background: url("check-circle.svg");
  background-position: center;
  background-size: contain;
  width: 32px;
  height: 32px;
  position: absolute;
  left: -45px;
  top: -1px;

  transform: scale(0) rotateZ(180deg);
  transition: all 0.4s cubic-bezier(0.54, 0.01, 0, 1.49);
}

input[type="radio"]:checked   label::before {
  transform: scale(1) rotateZ(0deg);
}

label::after {
  content: "";
  border: 2px solid #27ae60;
  width: 24px;
  height: 24px;
  position: absolute;
  left: -42px;
  top: 1px;
  border-radius: 50%;
}

<div >
  <h1>LOREM IPSUM</h1>
  <div >
    <input name="lpselection" id ="lp-selection-0" value="whatever" type = "radio">
    <label for="lpselection-0">whatever
    </label>
  </div>
  <div >
    <input name="lpselection" id ="lp-selection-1" value="idk" type = "radio">
    <label for="idk">idk
    </label>
  </div>
  <div >
    <input name="lpselection" id ="lp-selection-2" value="iirc" type = "radio">
    <label for="iirc">IIRC
    </label>
  </div>
  <div >
    <input name="lpselection" id ="lp-selection-3" value="lastone" type = "radio">
    <label for="lastone">lastone
    </label>
  </div>
</div>

Now I was trying to perform a transition on these radio buttons the same as I was performing a transition like this in the checkboxes (my previous post) however , again , transition wont work. Code , I suppose , doesn't have any problem , since I am using the same one for my checkboxes group and it works, however I'm afraid I havent probably ordered "input" and "label" correectly, even though they have to be right under each other, no ? What is going wrong here ?

CodePudding user response：

Your culprit is syntax errors in your for and id attributes primarily. See example below.

I used a unicode checkmark for the example since don't have the svg (which you could encode to include directly into the css if you wanted by the way), any other minor changes were simply for the sake of example. Cheers.

.container3 {
  padding: center;
  /*height: 100vh;*/
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container3 .materiali {
  padding: 8px 48px;
  margin: 8px;
  font-family: Baskerville;
  font-size: 25px;
}

input[type="radio"] {
  display: none;
}

label {
  position: relative;
  cursor: pointer;
}

label:before {  
  content: "