Radio button animation , transition not working

Question

.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 class="container3">
  <h1>LOREM IPSUM</h1>
  <div class="materiali">
    <input name="lpselection" id ="lp-selection-0" value="whatever" type = "radio">
    <label for="lpselection-0">whatever
    </label>
  </div>
  <div class="materiali">
    <input name="lpselection" id ="lp-selection-1" value="idk" type = "radio">
    <label for="idk">idk
    </label>
  </div>
  <div class="materiali">
    <input name="lpselection" id ="lp-selection-2" value="iirc" type = "radio">
    <label for="iirc">IIRC
    </label>
  </div>
  <div class="materiali">
    <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 ?

Answer 1

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: "🗸";
  z-index: 1;
  color: red;
  font-size: 2.5rem;
  background: url("check-circle.svg") center / contain no-repeat;
  width: 32px;
  height: 32px;
  position: absolute;
  left: -40px;
  top: -13px;

  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 class="container3">
  <h1>LOREM IPSUM</h1>
  <div class="materiali">
    <input name="lpselection" id="lp-selection-0" value="whatever" type="radio">
    <label for="lp-selection-0">whatever</label>
  </div>
  <div class="materiali">
    <input name="lpselection" id="lp-selection-1" value="idk" type="radio">
    <label for="lp-selection-1">idk</label>
  </div>
  <div class="materiali">
    <input name="lpselection" id="lp-selection-2" value="iirc" type="radio">
    <label for="lp-selection-2">IIRC</label>
  </div>
  <div class="materiali">
    <input name="lpselection" id="lp-selection-3" value="lastone" type="radio">
    <label for="lp-selection-3">lastone</label>
  </div>
</div>