动画：
transfprmm 2D变形设置网页元素样式
transition制作过度动画 ：
property过度或动态模拟css属性
duration：过度需要的时间
timing-function过度函数
delay过度开始出现的延迟时间
all：时间又快到慢
ease：速度又快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快
ease-out：速度越来越慢
ease-in-out:速度先加速在减速
伪类触发：
hove
active
focus
checked
媒体查询：通过@media属性判断设备的尺寸，方向等
JavaScript触发：用JavaScript脚本触发
animation制作网页动画
变形函数：
translate（）：平移函数，基于X,Y坐标重新定位元素的位置
scale（）：缩放函数，可以使任意元素对象尺寸发生变化
rotate（）：旋转函数，取值是一个度数值
skew（）：倾斜函数，取值是一个度数值
================================================
animation(动画）
1.声明关键帧（帧就是一个个画面）
@keyframes{
//声明内容
0%{ //样式
}
50%{ //样式
}
}
2.调用关键帧{
animation-name：动画名字
animation-duration：动画时间
animation-timing-function：动画方式
animation-delay：延迟时间
animation-iteration-count：播放次数
animation-direction：播放方向
animation-play-state：动画的播放状态
animation-fill-mode：动画开始之前和结束之后发生的操作
2D变形：transform
可以控制元素的旋转、平移、倾斜、缩放的一系列集合的
效果
2d旋转：transform：rotate（旋转度数）
2d平移：transform：translate（100px，0）
第一个参数为x轴平移（正数往右，负数往左）
第二个参数为y轴平移值（正数往下，负数往上）
只往x轴进行平移：transform：translate X（像素值）
只往y轴进行平移：transform：translate y（像素值）
2d的倾斜：transform：skew（x，y 倾斜度数）
x轴的倾斜:transform：skew X(）；
y轴的倾斜:transform：skew Y(）；
2d缩放：transform: scale(2，0)取值的小数0-1之间代表缩小
只往x轴进行缩放：transform: scale X(倍数);
只往y轴进行缩放：transform: scale Y(倍数);
css3的过渡（transition）：
一种元素形态转换为另一种元素形态的过程
transition：过渡的2d编形 过渡时间 过渡方式 过渡等待时间；
第一个：一般写all表示所有，还可以写2d函数
第二个：一般单位为s，过渡的时间
第三个：ease默认过渡（由快到慢）
linear：匀速过渡
ease-in：越来越快
ease-out：越来越慢
ease-in-out：先加速在减速
第四个;一般单位s，等待时间
第一步：添加触发的方式
例：鼠标悬浮触发 标签：hover{过渡后的2d变形}
active：点击时
focus：获取焦点
checked:被选中时
媒体查询
Java Script触发
第二步：在相应的元素中添加 transition：all 2s ease 0s；
css动画：
1.设置关键帧
@keyframes donghua{
10%{
width: 20px;
}
100%{
width: 500px;
}
}
动画的形成是由每一帧图像演变而来的
2.动画的调用
animation: donghua 5s linear 0s infinite;
第一个参数：动画的名称
第二个参数：动画执行的时间
第三个参数：动画执行的方式
第四个参数：等待时间
第五个参数：默认为一次，information无限次数
