CSS动画与交互

动画：animation 属性和 transition 属性

@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}
}

div
{
    animation:mykf 5s infinite;
}

animation 分成六个部分：

animation-name 动画的名称，这是一个 keyframes 类型的值（@ key-frameskeyframes 产生一种数据，用于定义动画关键帧。）；

animation-duration 动画的时长；

animation-timing-function 动画的时间曲线；（三次贝塞尔）

animation-delay 动画开始前的延迟；

animation-iteration-count 动画的播放次数；

animation-direction 动画的方向。

语法：

animation: name duration timing-function delay iteration-count direction;

animation-duration: time;

值	描述
time	规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。

animation-timing-function

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-delay: time;
animation-direction: normal|alternate;
animation-iteration-count: n|infinite;

值	描述
n	定义动画播放次数的数值。
infinite	规定动画应该无限次播放。

transition有四个部分：（这里的四个部分，可以重复多次，指定多个属性的变换规则）

transition-property 要变换的属性；

transition-duration 变换的时长；

transition-timing-function 时间曲线；

transition-delay 延迟。

transition-property: none|all| property;

值	描述
none	没有属性会获得过渡效果。
all	所有属性都将获得过渡效果。
property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

transition-duration: time;

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay: time;

作为了解：

animation 属性和 transition 属性背后的原理：贝塞尔曲线

贝塞尔曲线是一种插值曲线，它描述了两个点之间差值来形成连续的曲线形状的规则

一个量（可以是任何矢量或者标量）从一个值到变化到另一个值，如果我们希望它按照一定时间平滑地过渡，就必须要对它进行插值。

此文章为4月Day3学习笔记，内容来源于极客时间《重学前端》，推荐该课程。