动画和变形

盒子动画

简单动画: 简单动画通常称之为“过渡 transition”--CSS属性，在一定时间内，从一个值变化到另一个值.

渐变时间函数：transition-timing-function

对background和height应用过渡，并非所有属性都支持过渡, 颜色、尺寸、透明度类的属性通常都支持过渡效果.

贝塞尔曲线：cubic-bezier贝塞尔曲线是由四个参考点绘制而成的曲线 在CSS中，第一个点和第四个点已固定，用户可以设置第二和第三个点 曲线的纵坐标表示渐变轨迹，横坐标表示时间

示例：transition-timing-function:cubic-bezier(0.25,0.1,0.25,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 和ease类似，但比ease的加速度（幅度大）cubic-bezier(0.42,0,0.58,1)

Linear 全程匀速 cubic-bezier(0,0,1,1)

复杂动画

涉及到的属性：

animation-name：动画名称

animation-duration：单次动画总时长

animation-timing-function：时间函数

animation-delay：播放前延时的时长

animation-iteration-count：播放次数 特殊值：infinite

animation-direction：播放顺序

normal：正常播放

alternate：轮流反向播放

盒子变形:

通过变形可以改变盒子的视觉效果通过变形可以改变盒子的视觉效果.

如何变形:

可通过css属性transform对盒子进行变形

定义原点 transform-origin:

原点的位置会对某些变形产生影响

可通过CSS属性transform-origin设置盒子原点.

该属性的默认值是盒子中心，设置方式与background-position非常类似

变形的种类：

旋转(rotate) 缩放(scale) 移动(translate) 倾斜(skew)

其他属性：

透视距离：perspective 该属性设置到变形元素的父元素上

背面可见性：backface-visibility

 visible：默认值，背面可见

 hidden：背面不可见

标签：动画,cubic,变形,bezier,animation,属性
来源： https://www.cnblogs.com/tcq43356/p/11300575.html