dongsun2789
2015-04-08 20:51
采纳率: 100%
浏览 533

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.

图片转代码服务由CSDN问答提供 功能建议

在本网站链接箭头正在移动我想知道如何在 CSS中设置此效果

我有一个代码

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

但目前这个dosnt工作。 \ n

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • dousu5608 2015-04-08 21:02
    已采纳

    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;
      }
    
    点赞 打赏 评论
  • dqluw20882 2015-04-08 21:00

    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

    点赞 打赏 评论
  • dongre6270 2015-04-08 21:07

    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;
    }
    
    点赞 打赏 评论

相关推荐 更多相似问题