CSS 中的转换和过渡 |过渡不起作用

Question

我有以下 css 文件

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%;
}

这是一个简单的变换和过渡，我在 cubic-bezier 的那 4 个曲线点中旋转 img (check-circle.svg)，无论何时选中或取消选中。然而，过渡和转型不会奏效。它根本不会显示。我错在哪里了？

Answer 1

您确定在 <input type="checkbox"/> 之后立即放置了 <label>...</label> 吗？代码看起来不错，虽然我不确定 input[type="checkbox"]{ display: none; } 的目的是什么。发布 html 也很好。

您还可以检查提供的 svg url 是否正确。尝试将其替换为在互联网上找到的其他一些 svg url。

Answer 2

确保（标签）是（输入）

的直接下一个 child

CSS 中的转换和过渡 |过渡不起作用

Transforming and tranisitions in CSS | Transition not working

html

css

animation

css-transitions

css-transforms