《重学前端》学习笔记Day122

CSS动画与交互：为什么动画要用贝塞尔曲线这么奇怪的东西？

animation属性和transition属性

先看animation的示例：

@keyframes mykf
{
    from {background: red;}
    to {background: yellow;}
}
div
{
    animation:mykf 5s infinite;
}

上边展示animation的基本用法，实际上animation分为6个部分：

• animation-name 动画的名称，是一个keyframes类型的值(keyframes产生一种数据，用于定义动画关键帧)；
• animation-duration 动画的时长；
• animation- timing-function 动画的时间曲线
• animation-delay 动画开始前的延迟
• animation-iteration-count 动画的播放次数
• animation-direction 动画的方向

animation-name 是一个keyframes类型，需要配合@规则来使用。
比如上边的示例，keyframes的主体结构是一个名称和花括号中的定义，它按照百分比来规定数值。
在关键帧之间，是使用animation-timing-function作为曲线。
transition：与animation相比，是简单得多的一个属性。
它有四个部分：

• transition-property 要变换的属性；
• transition-duration 变换的时长；
• transition-timing-function 时间曲线；
• transition-delay 延迟。

这里的四个部分，可以重复多次，指定多个属性的变换规则。
实际上，我们可以把transition和animation结合，抛弃animation-timing-function，以编排不同时间段不同的曲线。

@keyframes mykf {
    from { top: 0; transition:top ease}
    50% { top: 30px;transition:top ease-in }
    75% { top: 10px;transition:top ease-out }
    to { top: 0; transition:top linear}
}

三次贝塞尔曲线

贝塞尔曲线是一种插值曲线，它描述两个点之间差值来形成连续的曲线形状的规则。
一个量（可以是任何矢量或者标量）从一个值到变化到另一个值，如果我们希望它按照一定时间平滑地过渡，就必须要对它进行插值。

此文章为7月Day25学习笔记，内容来源于极客时间《重学前端》，日拱一卒，每天进步一点点💪💪