CSS Toggle transition animation
Question
I have 2 CSS toggle buttons I am making. Right now when you click the button has a fade in and out effect. I want to to act more like a sliding from right to left animation. Attached is the HTML, CSS and al ink to a fiddle with my code. Thank you! https://jsfiddle.net/ebgpqvha/
<div class="switch-field">
<div class="switch-title">Hand:</div>
<input type="radio" id="switch_left" name="switch_2" value="yes" checked/>
<label for="switch_left">L</label>
<input type="radio" id="switch_right" name="switch_2" value="no" />
<label for="switch_right">R</label>
</div>
.switch-field, .switch-field2 {
font-family: "adiHaus", Arial, sans-serif;
font-size: 16px;
font-weight: 300;
margin: 0.2em;
overflow: hidden;
}
.switch-title {
margin-bottom: 6px;
}
.switch-field input, .switch-field2 input {
display: none;
}
.switch-field label, .switch-field2 label {
float: left;
}
.switch-field label {
display: inline-block;
width: 63px;
height: 40px;
background-color: #EFEFEF;
color: #cdcdcd;
font: 16px "adiHaus",Arial,sans-serif;
font-weight: bold;
text-align: center;
text-shadow: none;
padding: 10px 14px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
-webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.switch-field2 label {
display: inline-block;
width: 113px;
height: 40px;
background-color: #EFEFEF;
color: #cdcdcd;
font: 16px "adiHaus",Arial,sans-serif;
font-weight: bold;
text-align: center;
text-shadow: none;
padding: 10px 14px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
-webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.switch-field label:hover, .switch-field2 label:hover {
cursor: pointer;
}
.switch-field input:checked + label, .switch-field2 input:checked + label {
background-color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
color:000;
font-weight: bold;
}
.switch-field label:first-of-type, .switch-field2 label:first-of-type {
border-right: none;
}
.switch-field label:last-of-type, .switch-field2 label:last-of-type {
border-left: none;
}
2 answers
solution1
1 2020-03-03 22:28:47
You can try MoreToggles.css which is a pure CSS library.
You can choose a style which has sliding from right to left animation as you like.
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JNKKKK/MoreToggles.css/output/moretoggles.min.css">
</head>
<div class="mt-ios">
<input id="1" type="checkbox" />
<label for="1"></label>
</div>
solution2
0 ACCPTED 2016-05-23 20:16:12
You aren't going to be able to use two check boxes for this. Well you probably could, but I personally think it would be far too messy to be any good. So instead, you should include a field in your table, which is titled something like "Right Handed" and the answer is yes or no.
So you create a checkbox like so:
I've enclosed it in a table so that I can add the LH and RH either side.
.tgl { display: none; } * { box-sizing: border-box; } .tgl + .tgl-btn { outline: 0; display: block; width: 4em; height: 2em; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: #3f9ddd; border-radius: 2em; padding: 2px; -webkit-transition: all .4s ease; transition: all .4s ease; } .tgl + .tgl-btn:after, .tgl + .tgl-btn:before { position: relative; display: block; content: ""; width: 50%; height: 100%; } .tgl + .tgl-btn:after { left: 0; border-radius: 50%; background: #fff; -webkit-transition: all .2s ease; transition: all .2s ease; } .tgl + .tgl-btn:before { display: none; } .tgl:checked + .tgl-btn:after { left: 50%; } .tgl:checked + .tgl-btn { background: #2ecc71; }
<table> <tr> <td colspan="3">Hand</td> </tr> <tr> <td>LH</td> <td> <input class="tgl" id="cb1" type="checkbox"> <label class="tgl-btn" for="cb1"></label> </td> <td>RH</td> </tr> </table>
So the checkbox ends up checked if the person is Right Handed.
This requires no JavaScript, the CSS is based on whether the checkbox is checked or not using the :checked prefix.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.