html - 元素焦点上的 css3 动画

Question

我正在构建一个单页网站，并且在该网站的一部分中我有一个 CSS 动画

.animation {
    background-color: #54a3f7;
    -webkit-animation: html 2s ease-in-out;
}

设置为

@-webkit-keyframes html {
   0% { width: 0%;} 
   100% { width: 100%; }
}

我这里有一个工作示例: http://jsfiddle.net/RqH5H/

我的问题是这个动画(当然)会在窗口加载时启动，但我希望它在用户单击顶部菜单并希望看到 <section id="animations"> 时启动。因此，当用户单击“动画”时，它将向下滚动到动画开始时的那个部分

Answer 1

您将需要 Javascript 来实现这一点。您可以在单击时将类点添加到 CSS 动画(或您希望的任何交互事件)。我整理了一个基本的 JSFiddle 来演示:

注意:使用了 jQuery。

http://jsfiddle.net/zensign/sg9ty/1/

$('#start-btn').click(function () {
     $('#animate-me').addClass('animation');
});