Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <ul style="list-style-type:none">
    <li><a class="google" href="http://www.google.com" target="_blank">Google</a></li>
    <li><a class="yahoo" href="http://www.yahoo.com" target="_blank">Yahoo</a></li>
  </ul>
</html>
 
li {
  padding: 12px;
}
a {
  /*On Load Animation*/
  animation: loadLink 0.5s ease;
  -moz-animation: loadLink 0.5s ease;
  -o-animation: loadLink 0.5s ease;
  -webkit-animation: loadLink 0.5s ease;
  position: absolute;
  left: 0px;
}
/*On Load Animation*/
@keyframes loadLink {
  from {opacity: 0; left: -100px;}
  to {opacity: 1; left: 0px;}
}
@-moz-keyframes loadLink {
  0% {opacity: 0; left: -100px;}
  100% {opacity: 1; left: 0px;}
}
@-o-keyframes loadLink {
  0% {opacity: 0; left: -100px;}
  100% {opacity: 1; left: 0px;}
}
@-webkit-keyframes loadLink {
  0% {opacity: 0; left: -100px;}
  100% {opacity: 1; left: 0px;}
}
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers