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');
});

Answer 2

这个呢？

    .animation {
    height: 40px;
    width: 100%;
}
.animation:hover {
     background-color: #54a3f7;
    -webkit-animation: animation 2s ease-in-out;
    -moz-animation: animation 2s ease-in-out;
}

@-webkit-keyfram``es animation { 0% { width: 0%;}  100% { width: 100%; }}
@-mox-keyframes animation { 0% { width: 0%;}  100% { width: 100%; }}

用你的 jsfiddle html 替换它。