我@keyframes在 2016 年 1 月学习了 CSS3语法，两年多后，我发现自己@keyframes在很多工作中都使用了动画（比 CSS3 过渡更复杂，比基于 javascript 的动画更简单）。

我真正想念的一件事是能够以@keyframes秒而不是百分比来表达。是否有任何技巧可以实现这一目标？

我知道我可以使用以下100shack 来循环显示彩虹色，每 3 秒循环一次：

div {
    width: 120px;
    height: 120px;
    background-color: violet;
    animation: myAnimation 100s;
}

@keyframes myAnimation {
    0% {background-color: red;}
    3% {background-color: orange;}
    6% {background-color: yellow;}
    9% {background-color: green;}
   12% {background-color: cyan;}
   15% {background-color: blue;}
   18% {background-color: violet;}
  100% {background-color: violet;}
}

<div></div>

但这意味着动画在（有效）完成后仍在运行（尽管在不知不觉中）另外 82 秒。除其他问题外，这使多次迭代变得遥不可及。

我真正想写的很简单：

@keyframes myAnimation {

  0s {background-color: red;}
  3s {background-color: orange;}
  6s {background-color: yellow;} …

当我提供一个字符串时,如何使用点符号？

我正在编写一些代码来填充角度'x-editable'类型的控件.我有一个预定义的值数组,基于我的webapi服务将传递给我的字符串标识符.它发回一个字符串.基于此字符串,我从使用以下方法预定义的数组中选择对象:

valuetoshow = myarray['stringFromWebApiCall'];

JSHINT正在抛弃它,因为它要我使用点符号.我理解为什么JSHINT告诉我这个,而且我也理解它告诉我哪些线路,而且我知道如果我将我的代码改为像"answers.undergraduate = bigarray"那样它将修复jshint. 当我在下面的代码中提供了一个字符串时,我只是不知道如何使用.notation访问数组.

在javascript中是否有某种方法可以让我使用字符串以点表示法查找某些内容？我已经习惯了C#和这种准类型奇怪的变量定义,这让我很难理解.

• ['UNDERGRADUATE'] is better written in dot notation.
• ['GRADUATE'] is better written in dot notation.
• ['HONORARY'] is better written in dot notation.
• ['DOCTORATE'] is better written in dot notation.
• ['MASTERS'] is better written in dot notation.
• ['UNDEFINED'] is better written in dot notation.

我应该试图压制错误吗？我应该在api结果上写一个很难看的开关声明吗？

这是真正的代码

    answers['UNDERGRADUATE'] = [
      { 'name': 'Find a job', 'ticked': false, 'hideThisGroup':false, 'checkboxDisabled': false },
      { 'name': 'Create a network with STTI members', 'ticked': false, 'hideThisGroup':true, 'checkboxDisabled': …

如果我希望随着时间的推移不规则地改变opacitya 的<div>，我可以使用 CSSanimation和@keyframes：

.myDiv {
  animation: myAnimation 10s linear;
}

@keyframes myAnimation {

    0% {opacity: 1;}
   80% {opacity: 1;}
   81% {opacity: 0.99;}
  100% {opacity: 0;}

}

}

但是，如果我想要的东西改变volume了的<audio class="my-audio">以相同的方式不规则元素随着时间的推移？

我知道我可以开始：

var myAudio = document.getElementsByClassName('my-audio')[0];
myAudio.volume = 1.0;

但是我怎样才能将volumeto 0.99, when 81%of the sound clip has beenplayed and淡化到 a volumeto 0.0, when 100%of the sound clip has beenplayed?

这种听觉转换是否有 javascript 语法，或者我正在寻找不存在的东西（还）？

在 CSS 中，position: sticky使元素能够以某种position: static行为进行显示（即，它采用其在文档流中的默认位置），直到它到达某个滚动位置，然后采用某种position: fixed行为。

position: sticky那么...这是否意味着我们不能在需要正常行为的元素上使用position: absolute？

语境：

我有一个流出元素，它占据了视口左上角的位置。滚动一两英寸后，元素会到达视口的顶部，理想情况下，我希望它不会在此时继续消失。

我找不到以下标准的W3或WHAT-WG（甚至非标准第三方）规范：

<meta name="format-detection">

我有两个原则问题。

问题1：元标记中可以引用哪些格式？format-detection

最常见的是，第三方参考文献引用telephone.

偶尔email还是date被引用。

更罕见的是，address被引用。

一个来源 ( https://www.goodemailcode.com/email-code/template.html ) 引用了这一点url。

这给出了以下格式列表：

• telephone
• email
• date
• address
• url

这是完整的格式列表吗？还有其他人吗？

问题 2：必须单独引用每种格式，还是可以在单个元标记中一起引用任意数量的格式？

即问，是否需要声明：

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="url=no">

或者这是完全可以接受的：

<meta name="format-detection" content="telephone=no, email=no, date=no, address=no, url=no">

如果format-detection不是公认的标准，我非常乐意参考非标准规范（或博客文章），只要该文档具有一定的权威性并且不仅仅是第三方的观察或评论。