Question

我多年来一直试图让我的图标（第一个向下箭头）在我的主页上反弹。 Here is my test homepage showing the defect.起初我让它从一个位置滑到另一个位置，看起来粗糙但有效。我终于找到了这个简单的退回代码

.animate {

  -webkit-animation: bounce 1s infinite ;
}

@-webkit-keyframes bounce {
    0% { -webkit-transform: translate3d(0,   0px,0); 
         -webkit-animation-timing-function: ease-out; }
   50% { -webkit-transform: translate3d(0,-10px,0); 
         -webkit-animation-timing-function: ease-in; }
  100% { -webkit-transform: translate3d(0,   0px,0); }
}

但由于某种原因，它完全搞砸了我的整个页面的背景和格式。这种情况发生在Chrome和Firefox中，但不适用于Safari。此外，当我恢复旧代码时：

.animate
{

animation:mymove 1.5s infinite;
-webkit-animation:mymove 1.5s infinite; Safari and Chrome
}

@keyframes mymove
{
from {top:315px;}
to {top:335px;}
}

@-webkit-keyframes mymove Safari and Chrome
{
from {top:315px;}
to {top:335px;}
}

它根本不起作用。请帮忙！我只是希望这个愚蠢的箭头在大约上下跳动。 10px的。完整的CSS可用here for the defected homepage。任何帮助是极大的赞赏！

附录：我在W3Schools找到了以下内容，并且运行良好。：）

.animate {
animation:mymove 1s infinite;
-webkit-animation:mymove 1s infinite; /* Safari and Chrome */
}

@keyframes mymove
{
0%   {top:315px;}
50%  {top:325px;}
100% {top:315px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:315px;}
50%  {top:325px;}
100% {top:315px;}
}

webkit动画弹跳css

0 个答案: