从 & 到的 css 关键帧答案

【问题标题】：css Keyframes from & to从 & 到的 css 关键帧
【发布时间】：2021-11-03 11:48:50
【问题描述】：

我在 css 中找到了这个用于眨眼动画的代码笔。但我不明白他们为什么像这样使用 0%,100% 和 5%,95%。谁能解释一下为什么会这样？更改这些值会影响动画的速度。

 * {
    box-sizing: border-box;
    }

    .face {
         display: flex;
          justify-content: space-between;
          width: 150px;
          height: 200px;
    padding: 30px;
    background: tomato;
    transition: .3s ease-in-out;
     }

.face:hover {
    background: green;
}

.eye {
    background: white;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    -webkit-transform-origin: 50%;
    -webkit-animation: blink 5s infinite;
}

@-webkit-keyframes blink {
    0%, 100% {
        transform: scale(1, .05);
    }
    5%,
    100% {
        transform: scale(1, 1);
    }
}

这里也是 codepen 链接：https://codepen.io/obaidnadeem/pen/rNwWexx

【问题讨论】：

标签： css animation css-animations

【解决方案1】：

给定代码中的前 100% 是多余的，因为第二个会覆盖它。

在 95% 的情况下，虽然前 100% 不是多余的。正如您所指出的，这些设置会改变时间。

眼睛睁开的时间（y 为 1）略短，眨眼（从 1 到 0.5 再返回）的时间略长，睁眼和闭眼的时间相同。

【讨论】：

我忘了正确解释 95% 版本确保眼睛在与 0% 到 5% 相同的时间内闭合，而如果直接达到 100% 则眼睛立即闭合而没有过渡.

【解决方案2】：

这 0%、100%、5% 和 100% 是动画关键帧的属性。只有那些 kayframes 将被动画化。更多信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

【讨论】：