.box { height: 100px; width: 100px; background-color: #4679BD; border: 1px solid #335A8E; border-radius: 5px; -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5); box-shadow: 0 0 5px rgba(0,0,0,0.5); } .animate { -webkit-animation-duration: 0.6s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes "fadeout" { from { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } to { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } } @-moz-keyframes fadeout { from { filter: alpha(opacity=100); opacity: 1; } to { filter: alpha(opacity=0); opacity: 0; } } @-webkit-keyframes "fadeout" { from { filter: alpha(opacity=100); opacity: 1; } to { filter: alpha(opacity=0); opacity: 0; } } @-ms-keyframes "fadeout" { from { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } to { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } } @-o-keyframes "fadeout" { from { filter: alpha(opacity=100); opacity: 1; } to { filter: alpha(opacity=0); opacity: 0; } } /* .fadeout { -webkit-animation-name: fadeout; -moz-animation-name: fadeout; -ms-animation-name: fadeout; -o-animation-name: fadeout; animation-name: fadeout; } */ .fadeout { -webkit-animation: fadeout 1s ease 0s 1 forwards; }
function fadeOut(find){ element = document.querySelector(find); element.className = "box animate"; resetClass(element); addClass(element,"fadeout"); } function resetClass(el) { var class_to_remove = ['slideup','slidedown','facein','fadeout']; var each_class = el.className.split(" "); newclass = []; for (i=0 ; i < each_class.length ; i++) { if(class_to_remove.indexOf(each_class[i]) >= 0){ continue; } newclass.push(each_class[i]); } el.className = newclass.join(" "); } function addClass(el,cl){ el.className = el.className + " " + cl; }
<input type="button" value="Fade Out" onclick="fadeOut('#box')"> <hr/> <div class="box animate" id="box"></div>