【无标题】过渡与动画

1.过渡

1.过渡作用：在不使用js也可以实现动画效果，当元素从一种样式变换为另一种样式时为元素添加效果
2.过渡动画：从一个状态渐渐的过渡到另一个状态
3.常和：hover一起搭配使用
4.transition:要过渡的属性 花费时间 运动曲线 何时开始
1.要过渡的属性：想要变化的css属性，宽度高度，背景颜色，内外边距都可以，如果想要所有的属性都变化过渡，写一个all即可；如果让几个属性改变用逗号隔开
2.花费时间：单位是秒
3.运动曲线：默认是ease
4.何时开始：单位是秒，可以设置延迟触发时间，默认是0s
5.口令：过渡写到本身上，谁做动画给谁加

<style>div {
		width:200px;
		height:200px;
		background-color: pink;
		/* 最后的两个属性可以不写 */
		transition: width .5s ease 1s，height .5s ease 1s;
	}
	div:hover {
		height: 400px;
		width: 400px;
	}
	</style>

2.动画

2.1 2D转换

1.可以实现元素的位移，旋转，缩放等效果
2.x轴水平向右，y轴水平向下
2D移动-translate

特点：
1.定位，盒子的外边距，2d转换移动都能移动盒子的位置，但只有2D移动不会影响到其他元素的位置，这是定位和外边距无法实现的
2，对行内标签没有效果
3.translate中的百分比单位是相对于自身元素的translate（50%，50%）表示移动的距离是盒子自身的一半
4.移动是沿着x轴和y轴进行的
2D旋转-rotate
1.让元素在2维平面内内顺时针旋转或者逆时针旋转
2.语法：transform：rotate（度数）
3.rotate里面跟度数，单位是deg
4.角度为正数，顺时针旋转，角度为负数，逆时针旋转
5.默认旋转的中心点是元素的中心点

2D转换点transform-origin
语法：transform-origin：x y；
注：
1。注意后面的参数x和y用空格隔开
2.x，y默认转换的中心点是元素的中心点（50% 50%）
3.还可以给x，y设置像素或者方位名词（top bottom right center）
2D缩放-scale

1.语法：transform：scale（x，y）
2.括号里面写的是数字并且不跟单位，表示倍数
3.如果写一个参数，表示等比例缩放
4.优点：不会影响其他盒子，而且可以设置盒子的中心点（与移动相似）
2D转换综合写法
1.同时使用多个转换，其格式为：transform：translate() rotate() scale()…等（移动 旋转 缩放）
2.其顺序会影响转换的效果（先旋转会改变坐标轴的方向）
3.当我们同时又位移和其他属性的时候，记得要将位移放到最前面

2.2动画

制作动画步骤：
1.先定义动画（用keyframe定义动画，类似定义选择器)
2.再使用动画

<style>
		/* 关键帧 */
		@keyframes move {
			/* from
			{transform:translate(0,0);}
			to
			{transform:translate(10px,0);} */
			0% {
				transform: translate(0,0);
			}
			50% {
				transform: translate(10px,0);
			}
			100% {
				transform: translate(10px,100px);
			}

		}
		div {
			width: 100px;
			height: 100px;
			background-color: pink;
			/* 动画名称 */
			animation-name: move;
			/* 动画时间 */
			animation-duration: 10s;
			/* 变化速度 */
			animation-timing-function: ease;
			/* 何时开始 */
			animation-delay: 1s;
			/* 重复次数 */
			animation-iteration-count: infinite;
			/* 是否来回反向播放 */
			animation-direction: alternate-reverse;
			/* 播放完毕是否返回原位置，默认是返回原位置 */
			animation-fill-mode: forwards;
			
		}
		div:hover {
			/* 鼠标经过播放停止 */
			animation-play-state: paused;
		}
	</style>

注：
1.可以同时做多个状态的变化
2.里面的百分比需要是整数，百分比代表总的时间的划分
3.动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态（前两个属性一定要写,暂停动画属性不能简写里面)

动画的简写属性：

2.3 3D转换

特点：
1.近大远小
2.物体后面遮挡不可见
3.x轴：水平向右（x右边是正值，左边是负值）
y轴：垂直向下（下面是正值，上面是负值）
z轴：垂直屏幕（往外面是正值，往里面是负值）
4.简写形式中xyz是不能省略的，如果没有就写0

2.4 3D移动-translate

transform: translateX(100px) translateY(100px) translateZ(100px);
			/* 简写效果 */
			transform: translate3d(100px,100px,100px);

2.5 3D透视 perspective

1.透视写到被观察元素的父元素上
2.要通过translatez属性来实现
3.给父元素加入一个固定的透视，但给不同的盒子指定不同的translatez
4.视距：一个距离人的眼睛到屏幕的距离
5.z轴越大我们看到的物体也越大

2.6 3D旋转rotate3d

1.对于元素旋转方向的判断，需要左手准则
左手准则：
1.大拇指指向x轴，y轴，z轴正方向
2.其余四个手指弯曲方向就是沿该轴旋转的正方向
简写（transform：rotate3d（1，0，0，45deg）

2.7 3D呈现transform-style

1.控制子元素是否开启三维立体环境
2.transform-style：flat子元素不开启3D立体空间，默认属性
3.transfo-style：preserve-3d；子元素要开启立体空间
4.代码写给父级，但影响的是子盒子