Нажимая на любую ссылку необходимо плавно сделать прозрачным весь контент.
В моем случае исчезает только нажатая ссылка, что я делаю не так?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
a:active {
-webkit-animation: fade-out 1s linear;
/* Safari 4+ */
-moz-animation: fade-out 1s linear;
/* Fx 5+ */
-o-animation: fade-out 1s linear;
/* Opera 12+ */
animation: fade-out 1s linear;
/* IE 10+, Fx 29+ */
}
@-webkit-keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0.1; }
}
@-moz-keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0.1; }
}
@-o-keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0.1; }
}
@keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0.1; }
}
</style>
<a href="">test</a>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>