Html CSS关键帧运动不起作用_Html_Css_Css Animations

Html CSS关键帧运动不起作用

html css

Html CSS关键帧运动不起作用,html,css,css-animations,Html,Css,Css Animations,在上面的plnkr中，我希望关键帧动画使链接从左向右移动，加载时不透明度改变。然而，我只能看到不透明度的变化，并且应该从100px向左到0px的水平运动不起作用任何帮助都将不胜感激代码如下： CSS: HTML 添加到你的CSS li { padding: 12px; } a { /*On Load Animation*/ animation: loadLink 0.5s ease; -moz-animation: loadLink 0.5s ease; -o

在上面的plnkr中，我希望关键帧动画使链接从左向右移动，加载时不透明度改变。然而，我只能看到不透明度的变化，并且应该从100px向左到0px的水平运动不起作用

任何帮助都将不胜感激

代码如下：

CSS:

HTML

添加

到你的CSS

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;
}

这是你的新代码

如果没有位置：相对/绝对/固定/等，左侧本身不会做任何事情。使用位置：相对

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

a {
  position: relative;
}

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;
}