简单的CSS过渡

Question

我想写类似顶端动画徽标在本网站的菜单：XOXCO

它看起来像一个简单的CSS技巧，但我有一些问题。看过源代码和CSS文件后，我有几个问题，我希望有人能回答。

是什么让图像在仍然悬停的时候回到原来的位置（给他们快速反弹效果）？为什么它不是一边一遍又一遍地重复转换？在这里有没有比CSS更多的工作，我只是没有看到它？

Answer 1

是在他们的main.js完成：

var delay = 500; 
$('ul#animated_logo li').each(function() { 
    (function(el) { 
     setTimeout(function() { $(el).css('top','20px'); },delay); 
    })(this);       
    delay = delay + 100; 
}); 

Answer 2

它只是纯粹的CSS3动画迭代计数（使用CSS3的性能和最佳实践），你可以在developer.mozilla 这里我有阅读动画迭代计数= 1

#e:hover { 
    animation: pulse 100ms ease-in-out 0s 1 alternate; 
} /* Works fine, pulses on hover */ 

DEMO

将其更改为5，那么你有这个

#e:hover { 
    animation: pulse 100ms ease-in-out 0s 5 alternate; 
} /* Works fine, pulses on hover */ 

DEMO2

全码

HTML

<menu> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</menu> 

CSS

menu li { 
    width: 100px; 
    height: 100px; 
    margin:10px; 
    background-color: #000; 
    float:left; 
} 
menu li:hover { 
    -webkit-animation: pulse 100ms ease-in-out 0s 5 alternate; 
    -moz-animation: pulse 100ms ease-in-out 0s 5 alternate; 
    animation: pulse 100ms ease-in-out 0s 5 alternate; 
} 



@-webkit-keyframes pulse { 
     0% { 
     -webkit-transform:translateY(-10px); 
     -moz-transform:translateY(-10px); 
     transform:translateY(-10px); 
    } 
     100% { 
     -webkit-transform:translateY(0px); 
     -moz-transform:translateY(0px); 
     transform:translateY(0px); 
    } 
} 

Answer 3

如果您检查网页的元素，选择网络，确保记录网络日志的启用，然后刷新你应该能够在页面过滤器脚本，找到的JavaScript/jQuery的，他们使用动画的标题图片..它的标题是main.js，代码如下：

$(function() { 
    // enable Aware.js, and add new flags to any sort of post-like content 
    $('.tile').aware(); 
    var delay = 500; 
    $('ul#animated_logo li').each(function() { 
     (function(el) { 
      setTimeout(function() { $(el).css('top','20px'); },delay); 
     })(this);       
     delay = delay + 100; 
    }); 
    setTimeout(function() { 
     $('ul#animated_logo li').css('-webkit-transition-duration','0.1s'); 
     $('ul#animated_logo').on('mouseenter','li',function() { 
     $(this).css('top','0px'); 
     (function(el) { 
      setTimeout(function() { $(el).css('top','20px'); },100); 
     })(this) 
    }); 
    },delay); 
}); 

他们正在使用main.js脚本的子元素李任何无序列表的编号为animated_logo。 希望这有助于。