http://plnkr.co/edit/46U9HFEJ3bWoYnvmeulY?p=preview
I am trying to create a keyframes animation in the plnkr above that will make links move from left to right with an opacity change on load. However, I am facing an issue where only the opacity change is visible and the horizontal movement, which should go from 100px left to 0px, is not working as expected.
Any assistance with this would be greatly appreciated.
See the code snippet below:
CSS:
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;
}
/*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;}
}
HTML
<!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>