CSS动画帮助。需要代码说明

Question

我一直试图找出这段CSS animation。我无法理解的是，创作者如何设置如此平滑地延长切换，没有任何关键帧动画或转换属性？另外在HTML方面，<b>标签在做什么？如果您注意到b标签已将类指定为

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

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

.switch{

} 

如果没有＆＃34; b＆＃34; ？ 提前谢谢。

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元素的另一个立方 - 布雷西尔过渡。

立方布雷塞尔是一种用于矢量动画的曲线类型，这条曲线（及其参数在括号中）与转换延迟相结合是平滑度的原因。

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

转换期限总计为.35s（因为transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);），它将根据其{right和left值进行转换1}}。此外，元素转换值将添加一个小的延迟时间。 transition-property: left, right;值的转换传递延迟left，而.05s属性没有延迟，传递延迟right。

对于立方贝塞尔过渡本身来说，它有点复杂但不要太担心。您可以将括号中给出的4个值中的每一个视为x和y轴上的点，这些点控制元素在0s的转换序列中的任何给定时刻将转换的速度。换句话说，它会平滑通过使动画定时非线性来消除动画。

有关立方 - 布雷西尔过渡的更多信息，请参阅本教程和演示：http://www.hongkiat.com/blog/css-cubic-bezier/

cubic-bezier(P0,P1,P2,P3);标记可用于表示粗体文本。尽管如此，它并没有真正做到这一点。设计师通常会使用<b>（斜体）或<i>标签作为某个元素的占位符，因为他们已经分配了背景图像或其他视觉样式，因为{{1} } tag只影响文本，他们可以确定他们的CSS不会受到html调用的影响。