元素焦点上的css3动画答案

【问题标题】：css3 animation on element focus元素焦点上的css3动画
【发布时间】：2013-07-23 22:16:57
【问题描述】：

我正在构建一个单页网站，并且在该网站的一部分中我有一个 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"> 时开始因此，当用户单击“动画”时，它将在开始动画时向下滚动到该部分

【问题讨论】：

您需要 JavaScript 的点击事件处理程序来触发动画。你知道 JavaScript 吗？
试试看 jQuert.animate() 很强大
通过接受一个需要在客户端上转储 70KB 带宽而不是实际以正确方式执行代码的答案，投反对票。
哇！ :-O 这个问题差不多 3 岁了...

标签： html css css-animations

【解决方案1】：

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

注意：使用 jQuery。

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

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

【讨论】：

甜蜜！像款待一样工作！它被设置为专注于#animation 部分。当该部分被关注时，它就开始了。非常感谢！
好吧，我想说“正确的方式”在这种情况下是相当主观的。我敢肯定，多年来使用 JQuery 快速创建解决方案的无数人可能都懒得写 Vanilla JS。但是既然你是专家，你为什么不继续用“正确”的答案来回应，也许 OP 会在 2 年后重新设计他们的解决方案。感谢您的宝贵贡献。

【解决方案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 替换它。

【讨论】：

这不是 OP 想要的。他正在寻找一个动画开场，然后让内容保持显示。您的解决方案弊大于利