我的前端自学之路2020/12/29C3动画

CSS3 2D变形 transform
元素移动：translate
1 .定义2D转换中的移动，沿着X轴和Y轴移动元素
2 .translate最大的优点，不会影响到其他元素的位置
3 .translate中的百分比是相对于元素自身大小来说的
4 .对行内标签没有效果

section {
     
	transform: translate(10px, 20px);
}
section {
     
	transform: translate(50%， 50%);
}
section {
     
	transform: translateX(10px);
}
section {
     
	transform: translateY(20px);
}

元素缩放 scale
transform: scale(x, y);
x和y默认为1倍，x或者y取值大于1，放大， x或者y取值小于1，缩小
scale放大和缩小都不会影响其他盒子，且可以手动设置缩放的中心点

section {
     
	transform: scale(0.8, 1);
}
section {
     
/*高度不指定数值，则默认和宽度一样也是0.8倍*/
	transform: scale(0.8);
}
section {
     
	transform: scaleX(0.8);
}
section {
     
	transform: scaleY(1.5);
}

元素旋转 rotate
transform: rotate(90deg);
旋转的单位为deg(度)，取值为正则顺时针旋转，取值为负则逆时针旋转。
旋转中心点 origin
transform-origin: center center;(默认为元素中心)，其他取值：top/left/right/bottom/具体数值坐标/百分比

元素倾斜 skew
transform: skew(30deg， 0deg); 第二个数值不写默认为0

2D转换综合写法：
transform: translate() rotate() scale()…;
顺序的变化会影响最终效果，当同时拥有位移和其他属性的时候，记得要将位移放到最前面。

CSS3 动画 animation
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
1 .keyframs定义动画
from和to 相当于0%和100%

@keyframes movie {
     
	from {
     
		/*开始点*/
		transform: translateX(0);
	}
	to {
     
		/*结束点*/
		transform: translateX(100px);
	}
}

2 .调用动画

section {
     
	/*动画名词，调用 必须写*/
	animation-name: movie;
	/*指定动画的持续时间  必须写*/
	animation-duration: 10s;
	/*指定动画播放的次数 默认为1次，infinite为无限循环 可省略*/
	animation-iteration-count: infinite;
	/*指定动画的运行曲线，默认为ease， 可省略*/
	animation-timing-function: ease-in;
	/*指定动画的开始时间，默认为0， 可省略*/
	animation-delay: 0;
	/*指定动画是否在下一周期逆向播放，默认为否normal， 可省略*/
	ainimation-direction: alternate;
	/*指定动画正在运行或者停止， 默认为running， 可省略*/
	animation-play-state: paused;
	/*指定动画结束后的状态，forwards保持结束状态，默认为backwards回到起始状态，可省略*/
	animation-fill-mode: forwords;
}

animation-timing-function有一个特殊属性steps(n)，步长，规定了动画从开始到结束分几步完成,它不像其他属性那么柔和，运行过程中是卡顿效果。
属性简写：
animation: 动画名称 动画时间 运行曲线 何时开始 播放次数 是否反方向；
注意：简写属性里面不包含animation-play-state。

3 . 多组动画(进度条方式)

@keyframes movie {
     
	0% {
     
		/*起始位置，也就是元素初始的位置，可以省略不写，也可以空着*/
		transform: translate(0, 0);
	}
	10% {
     
		/*一阶段*/
		transform: translate(100px, 0);
	}
	40% {
     
		/*二阶段*/
		transform: translate(300px, 0) scale(2);
	}
	60% {
     
		/*三阶段*/
		transform: translate(300px, 280px) scale(1) rotate(90deg);
	}
	90% {
     
		/*四阶段*/
		transform: translate(0, 280px);
	}
	100% {
     
		/*结束阶段*/
		transform: translate(0, 0);
	}
}

同一个元素可以添加多组动画，每组动画之间用逗号分隔。

CSS 3D转换
1 . 3D位移translate3d(x, y, z)
3D移动就是在2D移动的基础上多了一个移动的方向，也就是Z轴，Z轴一般用精确的PX像素单位，极 少用百分比单位。Z轴的移动效果必须依赖于透视。

2 .3D旋转rotate3d(x, y, z)
transform: rotateX(deg);
transform: rotateY(deg);
transform: rotateZ(deg);
旋转的方向遵循左手法则。

3 .透视perspective
透视也叫做视距，视距就是眼睛到屏幕的距离，单位是像素，视距遵循近大远小原则。
透视写在被观察的元素的父元素上，如果没有父元素，写在body上。

4 .3D呈现transform-style
让转换的子元素保留3D转换，也就是控制子元素是否开启三位立体效果，但是代码写给父级，而影响的是子元素。
transform-style: flat; 默认值，不开启
transform-style: preserve-3d; 开启。

浏览器私有前缀

浏览器的私有前缀是为了支持老版本的写法，最新版本的浏览器无需添加

-moz- ：代表firefox浏览器私有属性

-ms-：代表IE浏览器私有属性

-webkit-：代表safari、chrome私有属性

-o-： 代表Opera私有属性