动画和变形

 

1. 盒子动画

1 简单动画：

认识简单动画

简单动画的常见应用

渐变时间函数：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；linear

2 复杂动画

纯CSS实现大象行走

涉及到的属性

animation-name：动画名称
animation-duration：单次动画总时长

animation-timing-function：时间函数

animation-delay：播放前延时的时长
animation-iteration-count：播放次数: 特殊值：infinite}animation-direction：播放顺序: normal：正常播放; alternate：轮流反向播放

animation库：https://daneden.github.io/animate.css/

2. 盒子变形

1 变形概述

什么是变形

如何变形

2 变形详解

定义原点

变形的种类

旋转(rotate)
缩放(scale)

移动(translate)

倾斜(skew)

多重变形

3 其他属性

透视距离：perspective

观察者距离Z轴原点的距离，设置该属性，会制造透视效果

可继承

该属性设置到变形元素的父元素上

背面可见性：backface-visibility

visible：默认值，背面可见

hidden：背面不可见