Эффект появления CSS

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Эффект появления CSS - демо</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/assets/css/bootstrap.css" rel="stylesheet" />
<script src="/assets/js/jquery-2.1.1.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row text-center">
<h1 style="color:#666;text-shadow: 1px 1px 0px rgb(223, 223, 223), 2px 2px 0px rgb(185, 185, 185);">Эффект появления CSS</h1>
<div class="col-md-12">

<h2>Появление с изменением прозрачности</h2>
<p>Нажмите 2 раза на картинке чтобы повторить эффект</p>

<style>
.block-opacity {
visibility: hidden;
}
.block-opacity {
animation-name: myopacity;
-webkit-animation-name: myopacity;	
animation-duration: 1.7s;	
-webkit-animation-duration: 1.7s;
animation-timing-function: ease-out;	
-webkit-animation-timing-function: ease-out;		
visibility: visible !important;	
}
@keyframes myopacity{0%{opacity:0}10%{opacity:.1}20%{opacity:.2}30%{opacity:.3}40%{opacity:.4}50%{opacity:.5}60%{opacity:.6}70%{opacity:.7}80%{opacity:.8}90%{opacity:.9}100%{opacity:1}}
@-webkit-keyframes myopacity{0%{opacity:0}10%{opacity:.1}20%{opacity:.2}30%{opacity:.3}40%{opacity:.4}50%{opacity:.5}60%{opacity:.6}70%{opacity:.7}80%{opacity:.8}90%{opacity:.9}100%{opacity:1}}
</style>
<div id="block-opacity" class="block-opacity">
<img src="/design/adaptive-effect/2015/effect-css/the-effect-css.jpg" alt="Эффект появления" />
</div>

<h2>Появление при наведении</h2>

<style>
.opacity-hover {
opacity:0.3;
}
.opacity-hover:hover {
animation-name: opacity-hover;
-webkit-animation-name: opacity-hover;	
animation-duration: 0.5s;	
-webkit-animation-duration: 0.5s;
animation-timing-function: linear;	
-webkit-animation-timing-function: linear;
opacity:1;			
}
@keyframes opacity-hover{0%{opacity:.3}20%{opacity:.4}40%{opacity:.5}60%{opacity:.6}80%{opacity:.7}90%{opacity:.9}100%{opacity:1}}
@-webkit-keyframes opacity-hover{0%{opacity:.3}20%{opacity:.4}40%{opacity:.5}60%{opacity:.6}80%{opacity:.7}90%{opacity:.9}100%{opacity:1}}
</style>
<div class="opacity-hover">
<img src="/design/adaptive-effect/2015/effect-css/the-effect-css.jpg" alt="Эффект появления" />
</div>

<h2>Появление с изменением масштаба</h2>
<p>Нажмите 2 раза на картинке чтобы повторить эффект</p>

<style>
.opacity-transform {
visibility: hidden;
}
.opacity-transform {
animation-name: my-opacity-transform;
-webkit-animation-name: my-opacity-transform;	
animation-duration: 0.7s;	
-webkit-animation-duration: 0.7s;
animation-timing-function: ease;	
-webkit-animation-timing-function: ease;		
visibility: visible !important;	
}
@keyframes my-opacity-transform{0%{transform:scale(0);opacity:0}10%{transform:scale(0.1);opacity:.1;transform:scale(0.1);opacity:.1}20%{transform:scale(0.2);opacity:.2}30%{transform:scale(0.3);opacity:.3}40%{transform:scale(0.4);opacity:.4}50%{transform:scale(0.5);opacity:.5}60%{transform:scale(0.6);opacity:.6}70%{transform:scale(0.7);opacity:.7}80%{transform:scale(0.8);opacity:.8}90%{transform:scale(0.9);opacity:.9}100%{transform:scale(1);opacity:1}}
@-webkit-keyframes my-opacity-transform{0%{transform:scale(0);opacity:0}10%{transform:scale(0.1);opacity:.1}20%{transform:scale(0.2);opacity:.2}30%{transform:scale(0.3);opacity:.3}40%{transform:scale(0.4);opacity:.4}50%{transform:scale(0.5);opacity:.5}60%{transform:scale(0.6);opacity:.6}70%{transform:scale(0.7);opacity:.7}80%{transform:scale(0.8);opacity:.8}90%{transform:scale(0.9);opacity:.9}100%{transform:scale(1);opacity:1}}
</style>
<div id="opacity-transform" class="opacity-transform">
<img src="/design/adaptive-effect/2015/effect-css/the-effect-css.jpg" alt="Эффект появления" />
</div>

</div>
</div>
</div>
<script>
$( "#block-opacity" ).click(function() {
$(this).toggleClass("block-opacity");
});
$( "#opacity-transform" ).click(function() {
$(this).toggleClass("opacity-transform");
});
</script>
</body>
</html>