Question

http://plnkr.co/edit/46U9HFEJ3bWoYnvmeulY?p=preview

在上面的plnkr中，我希望关键帧动画能够使链接从左向右移动，加载时不透明度会发生变化。但是，我只能看到不透明度变化，并且从100px左侧到0px的水平移动不起作用。

任何帮助将不胜感激。

以下代码：

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>

Answer 1

添加

a {
  position: relative;
}

到你的CSS

Answer 2

$(this).attr('placeholder')

这里是您的新代码 (click here)

CSS关键帧运动无效

2 个答案: