利用css的transition属性详解，上图就是利用transition效果做的一个按钮。
transition属性：//举例子:transition:all 1s ease;transition:全部 1秒 缓和
???
transition: property duration timing-function delay;
property —— 指定CSS属性的name，transition效果 //举例：all width...那种属性 或者全部属性 注意：一定要改变他的长宽高其他的属性值才会触发transition 效果
duration —— transition效果需要指定多少秒或毫秒才能完成 //举例：1s(1秒) 持续时间
timing-function —— 指定transition效果的转速曲线 //举例：ease-in ease (贝塞尔曲线) 平滑效果 #查看更多详细
delay —— 属性指定何时将开始切换效果 //举例：2s 延迟两秒执行
#Style
???????#btn{ ???????????width: 48px; ???????????height: 20px; ???????????border:1px solid rgba(153, 153, 153, 0.35); ???????????border-radius:10px; ???????????background-color: white; ???????????transition:all 1s ease; ???????????position: relative; ???????????display: inline-block; ???????} ???????#btn_circle{ ???????????display: inline-block; ???????????height: 18px; ???????????width: 18px; ???????????border-radius: 9px; ???????????border:1px solid rgba(153, 153, 153, 0.15); ???????????transition: all 0.6s ease; ????????????background-color: #4cb946; ???????????position:absolute; ???????????top: 0px; ???????????right: 28px; ???????} ???????.btn_bg{ ???????????background-color: #4cb946!important; ???????} ???????.btn_circle_move{ ???????????right: 0!important; ???????????background-color: white!important; ???????}#Html
???<div style="padding: 100px;"> ???????<a id="btn"> ???????????????????<i id="btn_circle"></i> ???????????</a> ???</div>
#Js
???????var btn = document.getElementById("btn"); ???????var btn_circle = document.getElementById("btn_circle"); ???????btn.addEventListener("click",function () { ????????????var btnflag = btn.classList.contains(‘btn_bg‘); ???????????if(!btnflag){ ???????????????btn.classList.add("btn_bg"); ???????????????btn_circle.classList.add("btn_circle_move") ???????????}else{ ???????????????btn.classList.remove("btn_bg"); ???????????????btn_circle.classList.remove("btn_circle_move") ???????????}; ????????????return false; ????????},false)css3_transition: 体验好的过渡效果。附 好看的按钮
原文地址：https://www.cnblogs.com/jason1991/p/9436601.html