过渡不'；不要在使用CSS3创建的自定义单选按钮的反向模式下发生

我正在尝试为我的网站使用一个定制的单选按钮。我实现了同样的目标。我试着给单选按钮添加过渡效果，它也起作用了。我关心的是转换仅在选中状态下工作。当我取消选中单选按钮时，转换不会发生（即反向转换不会发生）。它只是一种方式。检查下面的代码

<section class="radio">
  <input id="set_empty" type="radio" name="err_rec" value="1">
  <label for="set_empty">Set empty value for the column</label>
   <input id="st_empty" type="radio" name="err_rec" value="1">
  <label for="st_empty">Set empty value for the column</label>
</section>

.radio{
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}
.radio input[type="radio"], .check input[type="checkbox"] {
    display: none;
}
.radio label, .check label {
    min-height: 1em;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
    display: inline-block;
    position: relative;
    outline: none;
}
.radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 12px;
    height: 12px;
    left: 0;
    border: 1px solid #46bedc;
    border-radius: 50%;
    background-color: #fff;
    top: 2px;
}
.radio label::after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 6px;
    height: 6px;
    left: 4px;
    top: 4px;
    border-radius: 50%;
    -webkit-transform: scale(1.6, 1.6);
    -ms-transform: scale(1.6, 1.6);
    -o-transform: scale(1.6, 1.6);
    transform: scale(1.6, 1.6);
    -webkit-transition: transform .5s cubic-bezier(0.6,1,0,0.78);
    -o-transition: transform .5s cubic-bezier(0.6,1,0,0.78);
    transition: transform .5s ease;
    top: 6px;
}
.radio input[type="radio"]:checked + label::after {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
    outline: none;
    background-color: rgb(70, 190, 220);
}

为列设置空值
为列设置空值
.收音机{
位置：相对位置；
显示：块；
边缘顶部：10px；
边缘底部：10px；
}
.radio输入[type=“radio”]，.check输入[type=“checkbox”]{
显示：无；
}
.无线电标签，.检查标签{
最小高度：1米；
左侧填充：20px；
页边距底部：0；
字体大小：正常；
光标：指针；
显示：内联块；
位置：相对位置；
大纲：无；
}
.无线电标签：：之前{
内容：“；
显示：内联块；
位置：绝对位置；
宽度：12px；
高度：12px；
左：0；
边框：1px实心#46bedc；
边界半径：50%；
背景色：#fff；
顶部：2个；
}
.无线电标签：：之后{
显示：内联块；
位置：绝对位置；
内容：“；
宽度：6px；
高度：6px；
左：4px；
顶部：4px；
边界半径：50%；
-webkit转换：比例（1.6,1.6）；
-ms变换：比例（1.6,1.6）；
-o变换：标度（1.6,1.6）；
变换：比例（1.6,1.6）；
-webkit变换：变换.5s三次贝塞尔（0.6,1,0,0.78）；
-o变换：变换5s三次贝塞尔（0.6,1,0,0.78）；
转型：转型。5s轻松；
顶部：6px；
}
.radio输入[type=“radio”]：选中+标签：：之后{
-webkit变换：比例（1,1）；
-ms变换：比例（1,1）；
-o变换：标度（1,1）；
变换：比例（1,1）；
大纲：无；
背景色：rgb（70、190、220）；
}

---

您还需要变换背景色，才能看到效果。没有任何过渡，它会立即从颜色变为透明。因此，

变换

上的转换肉眼看不见

收音机{
位置：相对位置；
显示：块；
边缘顶部：10px；
边缘底部：10px；
}
.无线电输入[type=“radio”]，
.检查输入[type=“checkbox”]{
显示：无；
}
.无线电标签，
.检查标签{
最小高度：1米；
左侧填充：20px；
页边距底部：0；
字体大小：正常；
光标：指针；
显示：内联块；
位置：相对位置；
大纲：无；
}
.无线电标签：：之前{
内容：“；
显示：内联块；
位置：绝对位置；
宽度：12px；
高度：12px；
左：0；
边框：1px实心#46bedc；
边界半径：50%；
背景色：#fff；
顶部：2个；
}
.无线电标签：：之后{
显示：内联块；
位置：绝对位置；
内容：“；
宽度：6px；
高度：6px；
左：4px；
顶部：4px；
边界半径：50%；
变换：比例（1.6,1.6）；
过渡：变换。5s轻松，背景色。5s轻松；
顶部：6px；
}
.radio输入[type=“radio”]：选中+标签：：之后{
变换：比例（1,1）；
大纲：无；
背景色：rgb（70、190、220）；
}

为列设置空值
为列设置空值