Radio button animation , transition not working - html

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>

Answer 2

The transition doesn't work. I inspect a little bit, and I see that you put an image on label::before which it does not load. Second it's not the correct method, you should use ::checked on input and style with CSS. You put a transition on :before that is not triggered. You can use transition on :hover for example.