CSS(5) CSS3过渡变换和动画
1、过度
添加过渡效果:过渡效果执行完毕之后，默认会还原到原始状态
1.transition-property:添加过渡效果的样式属性名称
transition-property: left;//
2.transition-duration:过渡效果的耗时 以秒做为单位
transition-duration: 2s;//设置过度耗时为2秒
3.transition-timing-function:设置时间函数--控制运动的速度，属性值有点多，参考相关文档
transition-timing-function: linear;//均速过度，默认是ease（先快后慢）
transition-timing-function: steps(5);//整个过度过程分为5步完成
4.transition-delay:过渡效果的延迟
transition-delay: 2s;//过度的延迟时间
5.transition:为多个样式同时添加过渡效果
transition: height 2s,width 2s linear 0s,background-color 5s linear 0s;
注意：
过渡效果只能产生从某个值到另外一个具体的值的过渡，比如不能加display:none过度到display:block;
一定要设置为哪些css样式添加过渡效果
一定要设置过渡效果的耗时
例子：想通过过度的效果实现鼠标移动到div上，div变大变色，鼠标离开div后，默认会自动还原
2、二维变换
transform
1.移动：translate
移动是参照元素的左上角
执行完毕之后会恢复到原始状态，和过度一样
如果只有一个参数就代表x方向
如果有两个参数就代表x/y方向
如：transform: translate(100px,100px);//让某元素向x轴方向和y轴方向移动100px
添加水平或者垂直方向的移动
transform:translateX(100px);//transform: translate(100px,0px);
transform:translateY(100px);//transform: translate(0px,100px);
2.缩放：scale
实现缩放，1指不缩放，>1.01放大 <0.99缩小
默认参照元素的几何中心进行缩放或扩展
如果只有一个参数，就代表x和y方向都进行相等比例的缩放
如果有两个参数，就代表x/y方向
transform: scale(2);//x y 方向都扩大2倍
transform: scale(2,1);//x方向扩大2倍，y方向上不变
transform:scaleX(0.5);//缩放或扩展指定的方向
transform:scaleY(0.5);//缩放或扩展指定的方向
3.旋转：rotate
rotate(数值)。数值表示多少度，可正可负，正数为顺时针方向，负数为逆时针方向
默认参照元素的几何中心进行旋转
如：transform: rotate(-90deg)//逆时针
4.斜切：skew
skew(数值)。数值表示多少度，可正可负，正数为顺时针方向，负数为逆时针方向
transform-origin:
设置旋转或者缩放轴心
可以用2个数字表示x和y坐标
可以使用2个关键字表示某个点：left top right bottom center
transform-origin:100px 100px;//100,100坐标点
transform-origin:left top;//左上角
3、设置任意元素居中：
父元素绝对定位（也可是其他定位，只要是定位即可）
子元素相对定位
设置子元素的left和top值分别为50%。定位的百分比是参照父容器的宽高
使用transform实现元素的居中，transform: translate(-50%,-50%);，百分比是参照元素本身的宽高
示例：
4、三维变换
transform
1.移动：translate3d
translate3d(X方向的偏移，Y方向的偏移，Z方向的偏移)
transform: translate3d(400px,0,0);//transform: translate3dX(400px);
transform: translate3d(0px,400px,0);//transform: translate3dY(400px);
transform: translate3d(0px,0px,400px);//transform: translate3dZ(400px);
2.缩放：scale3d
scale3d(x方向上的缩放，y方向的缩放，z方向的缩放)
大于1为放大，小于1为缩小
3.旋转：rotate3d
rotate3d(x,y,z,angle);
x:代表x轴方向上的一个向量值
y:代表y轴方向上的一个向量值
z:代表z轴方向上的一个向量值
angle为一个角度
5、案例：实现一个正方体
6、添加动画
创建动画
百分比是指整个动画耗时的百分比
@keyframes moveTest {
0%{
transform: translate(0,0);
}
50%{
transform: translate(0,500px);
}
100%{
transform: translate(500px,500px);
}
}
上述定义假设动画耗时2秒，那么表示前一秒将元素向y轴正方向移动500px，后一秒将元素向x轴正方向移动500px
0%可以写成from
100%可以写成to
@keyframes moveTest {
from{
transform: translate(0,0);
}
50%{
transform: translate(0,500px);
}
to{
transform: translate(500px,500px);
}
}
添加动画效果
1.animation-name:指定动画名称 必填
animation-name: moveTest;
2.animation-duration设置动画的总耗时 必填
animation-duration: 2s;
3.animation-iteration-count设置动画的播放次数，
默认为1次 可以指定具体的数值，也可以指定infinite(无限次)
animation-iteration-count: 1;
4.animation-direction设置动画方向
normal： 正常方向
reverse： 反方向运行
alternate： 来回交替运行
alternate-reverse： 动画先反运行再正方向运行，来回交替运行
animation-direction: alternate;
5.animation-delay设置动画的延迟
animation-delay: 2s;
6.animation-fill-mode设置动画结束时的状态：
默认情况下，动画执行完毕之后，会回到原始状态
forwards:会保留动画结束时的状态，在有延迟的情况下，并不会立刻进行到动画的初始状态
backwards:不会保留动画结束时的状态，在添加了动画延迟的前提下，如果动画有初始状态，那么会立刻进行到初始状态
both:会保留动画的结束时状态，在有延迟的情况下也会立刻进入到动画的初始状态
animation-fill-mode: both;
7.animation-timing-function动画的时间函数
animation-timing-function: linear;//和过度的时间函数类似
8.animation-play-state设置动画的播放状态
paused:暂停
running:播放
animation-play-state: running;
9.简写animation:
animation:动画名称 动画耗时;
7、动画案例1 无缝滚动
