动画和变形

Posted 2022-08-02 rainbow1357

动画和变形

盒子动画

简单动画

渐变时间函数：transition-timing-function CSS属性以何种速度进行渐变

贝塞尔曲线：cubic-bezier

贝塞尔曲线是由四个参考点绘制而成的曲线

在CSS中，第一个点和第四个点已固定，用户可以设置第二和第三个点曲线的纵坐标表示渐变轨迹，横坐标表示时间  示例：transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)

贝塞尔曲线的预设值

Ease  渐快，匀速，减慢

ease-in   渐快，匀速

ease-out   匀速，减慢

ease-in-out  和ease类似，但比ease的加速度大（幅度大）

Linear   全程匀速

复杂动画

涉及到的属性

animation-name：动画名称

animation-duration：单次动画总时长

animation-timing-function：时间函数

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

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

animation-direction：播放顺序 normal：正常播放    alternate：轮流反向播放

animation库：https://www.dowebork

盒子变形

什么是变形

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

变形不会改变盒子原本的位置和尺寸，因此不会对其他元素造成影响

 

变形详解

变形的种类

Transition 过渡

旋转(rotate)

缩放(scale)

移动(translate)

倾斜(skew)

其他属性

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

背面可见性：backface-visibility  visible：默认值，背面可见   hidden：背面不可见