CSS动画帮助。需要代码解释[重复]

Question

我一直在试图弄清楚这块 CSS animation 。我无法理解的是创作者是如何在没有任何关键帧动画或变换属性的情况下如此顺利地拉长切换？同样在 HTML 方面，<b> 标签在做什么？如果您注意到 b 标记具有分配给它们的类

<b class="b switch"></b>

但是从 CSS 中选择了相同的类

.switch{

} 

没有 "b" 怎么办？ 提前致谢。

Answer 1

动画只是一个 css transition，延迟非常小。查看codepen example 中的transition、transition-property 和transition-delay 调用，如下所示：

     .check:checked ~ .switch {
        right: 2px;
        left: 22px;
        transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
        transition-property: left, right;
        transition-delay: .05s, 0s;
     }

当被检查的元素需要返回到其原始 css 和位置时，还会对 .track 元素应用另一个三次 brezier 过渡。

cubic brezier 是矢量动画中使用的一种曲线类型，这条曲线（及其括号中的参数）与过渡延迟相结合是平滑度的原因。

我们上述代码块背后的基本思想是：

转换持续时间总共为.35s（因为transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);），它将根据其transition-property: left, right;跨cssright和left值进行转换。此外，元素转换值会增加一个小的延迟时间。 left 值的转换传递了 .05s 的延迟，而 right 属性通过传递 0s 的延迟没有延迟。

对于三次贝塞尔转换本身，它有点复杂，但不要太担心。您可以将括号中给出的 4 个值中的每一个视为 x 和 y 轴上的点，它们控制元素在其过渡序列cubic-bezier(P0,P1,P2,P3); 期间在任何给定时刻过渡的速度，换句话说，它平滑了通过使动画时间非线性来制作动画。

有关cubic-brezier转换的更多信息，请参阅本教程和演示：http://www.hongkiat.com/blog/css-cubic-bezier/

<b> 标签可用于表示粗体文本。不过，这里并没有真正做到这一点。通常设计师会使用<i>（斜体）或<b>标签作为他们已经分配背景img或其他视觉样式的某些元素的占位符，因为<b>标签只影响文本，它们可以是确保他们的 css 不会受到 html 调用的影响。