CSS3动画 - 无限移动箭头

In this website link an arrow is moving i want to know to how to set this effect in CSS

i have a code

-webkit-animation: new_icon 2s linear 0s infinite alternate;

But for the moment this dosnt work.

You need to declare your animation details for new_icon - see the code in the CSS file on the site you refrence. You'll need to change the ID names accordingly.:

  @-webkit-keyframes new_icon {
    0% { -webkit-transform: translate(0px, 5px) ; }
    100% { -webkit-transform: translate(0px, -15px);  }
  }
  @-moz-keyframes new_icon {
        0% { background-position: 0 0; }
      100% { background-position: 0 600%; }
  }



    #lp-pom-image-350, #lp-pom-image-472, #lp-pom-image-473, #lp-pom-image-474, #lp-pom-image-475{
     animation: new_icon 1s linear 0s infinite alternate;
    -webkit-animation: new_icon 2s linear 0s infinite alternate;
  }

its because you would also need the animation set.

in this case the animation is called:

new_icon

for further information how it works read this about css3 animations

the new_icon animation would probably look like this: so add this to your css ( don't forget to prefix it) and it should work.

@keyframes new_icon {
    0%   { top: 275px; }
    100% { top: 300px; }
}

greetings timmi

You need to set up a css animation. The following one should do the trick:

@-webkit-keyframes bounce {
50% {
-webkit-transform(translateY(-30px));
}
100% {
-webkit-transform(translateY(0px));
}
}
/* For firefox and others than webkit based browsers */
@keyframes bounce {
50% {
transform(translateY(-30px));
}
100% {
transform(translateY(0px));
}
}

And then add this to the arrow class:

.your_arrow_class
{
    -webkit-animation: bounce 2s linear 0s infinite alternate;
    animation: bounce 2s linear 0s infinite alternate;
}