Geçiş, CSS3

Question

kullanılarak oluşturulan özelleştirilmiş bir radyo düğmesi üzerinde ters modda gerçekleşmiyor Web sitem için özelleştirilmiş bir radyo düğmesi kullanmaya çalışıyorum. Aynı şeyi hayata geçirmeyi başardım. Radyo düğmesine geçiş efektleri vermeye çalıştım, ayrıca çalıştı. Benim endişem geçiş kontrol sadece kontrol durumlarında. Radyo düğmemden birinin işaretini kaldırdığımda geçiş gerçekleşmez (tersine geçiş gerçekleşmez). Sadece bir şekilde davranıyor. Sen etkisi görünür olabilmesi için de background-color geçiş için gereken

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

Refer here

Answer 1

aşağıdaki kodu kontrol edin. Herhangi bir geçiş olmadan, renkten derhal şeffaflığa dönüşür. Bu nedenle, transform'daki geçiş göze görünmez.

.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%; 
 
    transform: scale(1.6, 1.6); 
 
    transition: transform .5s ease, background-color .5s ease; 
 
    top: 6px; 
 
} 
 
.radio input[type="radio"]:checked + label::after { 
 
    transform: scale(1, 1); 
 
    outline: none; 
 
    background-color: rgb(70, 190, 220); 
 
}

<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>