仿Material UI框架的动画特效

<button type="button"> 点我 </button>

button {   
  outline: none;
  position: relative;   
  overflow: hidden;   
  padding: 5px 10px;   
  background: #fff;   
  border: 1px solid #d9d9d9;   
  transition: all .3s;   
}
			
			.ripple {   
  width: 0;   
  height: 0;   
  border-radius: 50%;   
  background: rgba(0, 0, 0, .5);   
  -webkit-transform: scale(0);   
  transform: scale(0);   
  position: absolute;   
  opacity: 1;   
}
			
			.rippleEffect {   
  -webkit-animation: rippleEffect 2s cubic-bezier(0.23, 1, 0.32, 1);   
  animation: rippleEffect 2s cubic-bezier(0.23, 1, 0.32, 1);   
}
			
			@keyframes rippleEffect {   
  100% {      
    transform: scale(2);   
    opacity: 0;   
  } 
}
			
			@-webkit-keyframes rippleEffect {   
  100% {   
    -webkit-transform: scale(2);  
    opacity: 0;   
  }   
}

 function ripple(event, $this) {   
  event = event || window.event;   
  var x = event.pageX || event.originalEvent.pageX;   
  var y = event.pageY || event.originalEvent.pageY;   
  var wx = $this.width();   
  x = x - $this.offset().left - wx / 2;   
  y = y - $this.offset().top - wx / 2;   
  var span = '<div class="ripple"></div>';   
  $this.prepend(span);   
  $(".ripple").css({   
  width: wx,   
  height: wx,   
  top: y + "px",   
  left: x + "px"   
  }).addClass("rippleEffect");   
  $(document).one("webkitAnimationEnd animationend", ".ripple", function() {   
    $(".ripple").remove();   
  });   
}

$("button").on("click", function(e) {   
  ripple(e, $(this));   
});

<div class="material-box">   
  <input type="text" placeholder="text" />   
  <div>   
    <hr/>   
  </div>   
</div>

.material-box {
				position: relative;
				width: 200px;
				height: 30px;
			}
			
			.material-box input {
				border: none;
				width: 100%;
				height: 30px;
				border-bottom: 1px solid rgb(224, 224, 224);
				outline: none;
			}
			
			.material-box hr {
				position: absolute;
				top: 100%;
				width: 100%;
				margin: 0 auto;
				border-top: 2px solid rgb(0, 188, 212);
				transform: scale(0);
				transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
			}

var inputs = document.querySelector("input");
			var hr = document.querySelector("hr");
			inputs.addEventListener("focus", function() {
				hr.style.transform = "scale(1)";
			});
			inputs.addEventListener("blur", function() {
				hr.style.transform = "scale(0)";
			});
			$("button").on("click", function(e) {
				ripple(e, $(this));
			});

<div class="ww-checkbox">   
  <div class="ww-checkbox-box"><span class="fa fa-check"></span></div>   
  <input type="checkbox"  class="ww-checkbox-input" value="">   
</div>

.ww-checkbox {
				display: inline-block;
				position: relative;
				width: 20px;
				height: 20px;
			}
			
			.ww-checkbox input {
				opacity: 0;
				width: 20px;
				height: 20px;
			}
			
			.ww-checkbox-box {
				width: 20px;
				height: 20px;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
				line-height: 16px;
				border: 1px solid #D9D9D9;
				text-align: center;
			}
			
			.ww-checkbox-box .fa {
				display: none;
				font-size: 12px;
				font-weight: normal;
				color: #fff;
			}
			
			.ww-checkbox.active .ww-checkbox-box {
				background-color: #49be38;
				border: 1px solid #fff;
			}
			
			.ww-checkbox.active .fa {
				display: inline;
			}

$(".ww-checkbox").on("click", function() {
				if ($(this).hasClass("active")) {
					$(this).removeClass("active");
				} else {
					$(this).addClass("active");
				}
			});