githup:https://github.com/guldus98/HTML-CSS/tree/master/CSS%20Animation%20Check
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>page</title>
<link rel="stylesheet" type="text/css" href="1.page.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
</head>
<body>
<form class="form">
<h2>Checkboxes</h2>
<div class="inputGroup">
<input id="option1" name="option1" type="checkbox" />
<label for="option1">Option One</label>
</div>
<div class="inputGroup">
<input id="option2" name="option2" type="checkbox" />
<label for="option2">Option Two</label>
</div>
<h2>Radio Buttons</h2>
<div class="inputGroup">
<input id="radio1" name="radio" type="radio" />
<label for="radio1">Yes</label>
</div>
<div class="inputGroup">
<input id="radio2" name="radio" type="radio" />
<label for="radio2">No</label>
</div>
</form>
<script></script>
</body>
</html>CSS CODE:
.inputGroup{
background:#fff;
display:block;
margin:10px 0px;
position:relative
}
label{
padding:12px 30px;
width:100%;
display:block;
text-align:center;
color:#3c454c;
cursor:pointer;
position:relative;
z-index:2;
transition: color .2s ease-in;
overflow:hidden;
}
label::before{
content:"";
width:10px;
height:10px;
border-radius:50%;
position:absolute;
background:#5562eb;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale3d(1,1,1);
transition:all .3s cubic-bezier(.4,0,.2,1);
opacity:0;
z-index:-1;
}
label::after{
content:"";
width:32px;
height:32px;
border:2px solid #d1d7dc;
background-color:#fff;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
background-repeat:no-repeat;
background-position:2px 3px;
border-radius:50%;
z-index:2;
position:absolute;
right:30px;
top:50%;
transform:translateY(-50%);
cursor:pointer;
transition:all .2s ease-in;
}
input:checked ~ label{
color:#fff;
}
input:checked ~ label::before{
transform:translate(-50%,-50%) scale3d(56,56,1);
opacity:1;
}
input:checked ~ label::after{
background-color:#54e0c7;
border-color:#53e0c7;
}
input{
width:32px;
height:32px;
order:1;
z-index:2;
position:absolute;
right:30px;
top:50%;
transform:translateY(-50%);
cursor:pointer;
visibility:hidden
}
.form{
padding:0 16px;
max-width:550px;
margin:50px auto;
font-size:18px;
font-weight:600;
line-height:36px;
}
body {
background-color: #D1D7DC;
font-family: 'Fira Sans', sans-serif;
}
*,
*::before,
*::after{
box-sizing:inherit;
}
html{
box-sizing:border-box;
}
TrueCodes 