Animation How to - Create yellow-fade for page jump








Question

We would like to know how to create yellow-fade for page jump.

Answer


<!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: