标签：动画 cubic 变形 bezier animation 属性

盒子动画

简单动画: 简单动画通常称之为“过渡 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。