Javascript, css3 Fade function
Javascript
function fade()
{ var myDiv = document.getElementById("myDiv"); document.getElementById("in").addEventListener("click", function () { myDiv.className = myDiv.className.replace(/fade-out/, "").trim() + " fade-in"; }, false); document.getElementById("out").addEventListener("click", function () { myDiv.className = myDiv.className.replace(/fade-in/, "").trim() + " fade-out"; }, false); } |
CSS3/CSS
@-webkit-keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
@keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:0.5s;
-moz-animation-duration:0.5s;
animation-duration:0.5s;
}
.fade-in.one {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
@-webkit-keyframes fadeOut {
from {
opacity:1;
}
to {
opacity:0;
}
}
@-moz-keyframes fadeOut {
from {
opacity:1;
}
to {
opacity:0;
}
}
@keyframes fadeOut {
from {
opacity:1;
}
to {
opacity:0;
}
}
.fade-out {
opacity:1;
-webkit-animation:fadeOut ease-in 1;
-moz-animation:fadeOut ease-in 1;
animation:fadeOut ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:0.5s;
-moz-animation-duration:0.5s;
animation-duration:0.5s;
}
.fade-out.one {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
|
HTML
<div id="myDiv" class="fade-in one"></div>
(Adding to DIV to create function) <div id="a" onclick="fade()">
(Adding to DIV to create function) <div id="a" onclick="fade()">
Tada~