Skip to content

Instantly share code, notes, and snippets.

@youcune

youcune/fadein.html

Created August 24, 2014 12:23
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save youcune/551f082b6cabe4f4ae5c to your computer and use it in GitHub Desktop.
Save youcune/551f082b6cabe4f4ae5c to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 のみで display: none からフェードインさせる
Raw
fadein.html
<!DOCTYPE html>
<html>
<head>
<meta charst='utf-8'>
<title>TEST</title>
<script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<style>
.box {
background: #000000;
display: none;
height: 240px;
opacity: 0;
width: 240px;
}
.visible.box {
display: block;
opacity: 1;
animation-duration: 0.5s;
animation-name: fade-in;
-moz-animation-duration: 0.5s;
-moz-animation-name: fade-in;
-webkit-animation-duration: 0.5s;
-webkit-animation-name: fade-in;
}
@keyframes fade-in {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@-moz-keyframes fade-in {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@-webkit-keyframes fade-in {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
</style>
<script>
$(function() {
$('#btn').click(function() {
$('.box').toggleClass('visible');
});
});
</script>
</head>
<body>
<div class='container'>
<div class="box"></div>
<div>
<button id='btn'>START</button>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment