now I have this problem. In my code I have checkbox with both animations, when checked and unchecked. When I open "settings" on my website, these checkboxes are displayed, but if they are default checked or viewed again, they play the animation. Here's a simplified version of the situation:
function link(n){
if (n==1)
document.getElementById('tile1').style.display="block";
if (n==2)
document.getElementById('tile1').style.display="none";
}:root{
--w50color1:coral;
}
.tile1{
height:50px;
width:418px;
text-align:center;
line-height:50px;
border:none;
align-items:baseline;
}
.tilea input[type="checkbox"] {/*checkboxes window 1*/
height:21px;
width:30px;
top:6px;
opacity:0;
position:relative;
}
.tilea label {
position: relative;
outline:none;
text-decoration:none;
}
.tilea label::before {
height:20px;
width:20px;
content: "";
display: inline-block;
border: 2px solid;
border-radius:20px;
border-color:var(--w50color1);
top:0px;
left:-30px;
position:absolute;
-webkit- box-shadow:0 0 3px 0 #4a4a4a;
}
.tilea label::after {
height:20px;
width:20px;
content: "";
display: inline-block;
border:none;
border-radius:20px;
top:0px;
left:-30px;
position:absolute;
transform:scale(0);
}
.tilea input[type="checkbox"]:hover + label::before {
transform:scale(1.1, 1.1);
}
.tilea input[type="checkbox"]:hover + label::after {
transform:scale(1.1, 1.1);
}
.tilea input[type="checkbox"]:checked + label::before {
border-color:white;
}
.tilea input[type="checkbox"]:checked + label::after {
border: 2px solid;
border-radius:20px;
border-color:var(--w50color1);
animation:closein1a .5s ease-in-out forwards;
}
@keyframes closein1a{
0%{transform:scale(1, 1); background-color:white;}
25%{transform:scale(0.75, 1.25);}
35%{transform:scale(1.25, 0.75);}
50%{transform:scale(0.5, 1.5);}
65%{transform:scale(1.5, 0.5);}
75%{transform:scale(2, 2);}
100%{transform:scale(1, 1); background-color:var(--w50color1);}
}
.sspan{
font-size:18px;
}<html>
<head>
<link rel="stylesheet" href="cssb.css">
<meta charset="utf-8"/>
</head>
<body>
<button style="height:25px; width:50px;" onclick="link(1)">show</button>
<button style="height:25px; width:50px;" onclick="link(2)">hide</button>
<div class="tile1 tilea" id="tile1">
<input type="checkbox" id="chboxd1" checked>
<label for="chboxd1" class="sspann noselect">Dark mode</label>
</div>
</body>
</html>I would like to achieve not playing the animation after in this case pressing the button show, but only right after you check it. I will appreciate any help.
Aucun commentaire:
Enregistrer un commentaire