用逗号分隔的 WebKit 动画关键帧

在 2011 年 SXSW CSS3: Beyond The Basics 论坛上，我从 Estelle 那里学到了一点东西，那就是你可以在 WebKit 动画声明中用逗号分隔关键帧值。假设您想创建一个脉动效果作为动画。一种方法是创建一个动画，在 0% 和 100% 时改变不透明度，然后设置迭代次数使其运行几次。但是您可以通过使脉动动画在单个迭代中具有多个值来实现相同的效果，例如

@-webkit-keyframes pulsate {
        0%, 50%, 100% {
                opacity: 1;
        }
        25%, 75%  {
                opacity: 0.75;
        }
}

可以说这不太灵活，因为改变迭代次数非常容易，但是如果您确实有一个名为“pulsate”的动画，就像我上面提到的那样，我认为用这种方式命名它在语义上更清晰。

我已经更新了 WebKit 关键帧动画语法代码片段页面来反映这一点，并且通常更完整。

Andre

# 2011 年 3 月 22 日

这很酷，从我阅读这篇文章的理解来看。第一组百分比值告诉您的元素具有 1 的不透明度，而第二组告诉您的元素通过 -webkit-animation… 在 X 秒内具有 0.75 的不透明度。很棒！我喜欢！

Aaron Stone

# 2011 年 3 月 22 日

嘿，当使用它来模拟按钮上的开/关脉动效果时，这实际上更具语义性。

例如

@-webkit-keyframes pulsate {
        0%, 50%, 100% {
                background-color: #82c7ff;
        }
        25%, 75%  {
                background-color: #49a7f3;
        }
}

#my-button {
  background-color: #49a7f3;
  display: inline-block;
  padding: 12px 20px;
  border-radius: 12px;
  color: white;
  text-decoration: none;
  border: none;
  font-size: 22px;
  font-weight: bold;
}

#my-button:focus {
  -webkit-animation: pulsate 1s infinite;
}

如果我理解错误，请随时纠正我 =)

redlex

# 2011 年 3 月 22 日

非常感谢这篇非常详细的文章。我刚刚用 WordPress 创建了一个新网站。http://colorfashion.co.cc/ 我不得不做一些修补才能使其完美。这篇文章一定会对我的下一个网站有所帮助。

Julian

# 2011 年 3 月 26 日

酷…
感谢“@-webkit”系列 :D

Avi

# 2011 年 3 月 31 日

非常棒的技巧….

sahara

# 2011 年 4 月 3 日

非常棒的信息！谢谢！:)

此评论线程已关闭。如果您有重要信息要分享，请联系我们。