We would like to know how to create yellow-fade for page jump.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
:target {<!-- w ww . j a v a2 s . c om-->
-webkit-animation: yellow-fade 3s;
-moz-animation: yellow-fade 3s;
animation: yellow-fade 3s;
}
@-webkit-keyframes yellow-fade {
5%{background-color: #ff8;}
}
@-moz-keyframes yellow-fade {
5%{background-color: #ff8;}
}
@keyframes yellow-fade {
5%{background-color: #ff8;}
}
p {
margin-bottom: 1000px;
}
</style>
</head>
<body>
<p id=section:foo>
<a href=#section:bar>Go!</a>
</p>
<p id=section:bar>
<a href=#section:foo>Back!</a>
</p>
</body>
</html>
The code above is rendered as follows: