Transforming and tranisitions in CSS | Transition not working

Question

I have the following css file

body {
    font-family: Baskerville;
    background: #ecf0f1;
    color:  #2c3e50;
}
h1 {
    margin: 16px 0;
    padding-left: 16px;
    border-left: 5px solid #e74c3c;
    font-family: Baskerville;
    font-size: 48px;
}
h3 {
    margin: 16px 0;
    padding-left: 16px;
    color:  #cccac4;
}
.container1 {
    padding: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.container1 .checkbox {
    padding: 8px 48px;
    margin: 8px;
    font-family: Baskerville;
    font-size: 25px;
}

input[type="checkbox"]{
    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: -44px;
  top: -8px;

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

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

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

This is a simple transform and transition where i rotate the img (check-circle.svg) in those 4 curve points of cubic-bezier , whenever it is checked or unchecked after. However the transition and transformation wont work. It will simply not show. Where am i mistaken ?

Answer 1

Are you sure you've placed <label>...</label> immediately after <input type="checkbox"/>? Code seems fine, although I'm not sure what is the purpose of input[type="checkbox"]{ display: none; }. Posting html would be nice too.

Also you can check if provided svg's url is correct. Try to replace it with some other svg url found on internet.