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替换它。

关于元素焦点的css3动画

2 个答案: