CSS3属性学习笔记（过渡，2D变换，3D变换，动画）

CSS3属性（过渡，2D变换，3D变换，动画）一、transition属性 (加给变换的元素)[]定义： 元素从一种样式逐渐改变为另一种的效果。[]前提：①css属性指定 ②效果持续时间[]过渡有四个属性值
* 过渡属性名称：transition-property (/)
* 过渡时间：transition-property (0)
* 运动(时间)曲线:transition-timing-function

	* ease (default)
	* linear
	* ease-in
	* ease-out
	* ease-in-out
* 延迟时间:transition-delay (0)

[]多组过渡效果 ： 添加的属性由逗号分隔。 transition: width 2s , height 2s 2s ; []all属性的作用 当前元素多个属性需过渡，且同时发生 eg: transition: width 2s , height 2s , background-color 2s; transition: all 2s;[]注意： 1.过渡不要写在hover里面 2.不管正反方向，效果图均按代码顺序变化二、transform属性（元素2D与3D转换）[]定义：transform属性应用于元素的2D或3D转换，可将元素旋转，缩放，移动，倾斜等[]属性
* 2D 转换

	* translate    // transform：translate（x，y）；

实现定位元素的居中div { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; transform: translate(-50% , -50%); //如果使用百分比作为单位，那么位移的距离则是以元素本身的宽高作为参照计算。 //此时不管元素的宽高如何发生变化，百分之五十都是自身的一半，不需要做任何修改。} * scale（缩放） // transform：scale（x-宽度,y-高度）；
* rotate（旋转） // transform：rotate（angle）；

		* deg是角度单位
		* 正数为顺时针，负数为逆时针
	* transform-origin ：设置旋转原点

		* transform-origin：left top；
		* transform-origin：-50px -50px;
	* 组合：

div:hover { transform: rotate(360deg) scale(2,2);
//在旋转的同时，缩放。属性值之间用空格隔开，切记是空格隔开。} * 3D 转换

	* 平移

		* translateX
		* translateY
		* translateZ

			* 正向出
		* perspective （近大远小）

			* perspective设置给变换元素的父元素，距离大小一般为600px-1000px之间。
	* 旋转

		* rotateX
		* rotateY
		* rotateZ
	* 缩放

		* scaleZ

eg： div:hover { transform: scaleZ(2); }
//需要用在立方体元素上才有效果。
三、 动画： 1. transition：过渡动画 2. animation：补间动画一、当页面一开始加载的时候，动画就开始执行[]1.声明动画： @keyframes 动画名称 { from { transform: transformX(0); //开始状态 } to { transform: transformX(1200px); //结束状态 } }
[]2.调用动画：
animation：moving 1s infinite alternate;
// animation：名称 时间 运动曲线 延迟时间 播放次数 是否反向 ；

[]3.相关属性：
*
@keyframes //定义动画
*
animation-name // 规定 @keyframes 动画的名称
*
animation-duration // 规定动画完成一个周期所花费的时间
*
animation-timing-function // 规定动画的速度曲线。默认是 “ease”
*
animation-delay // 规定动画何时开始。默认是 0
*
animation-iteration-count // 规定动画被播放的次数

	* 

1 (default)
*
infinite
*
animation-direction // 动画是否在下一周期逆向地播放

	* 

normal (default)
*
alternate 逆播放
*
animation-play-state // 规定动画是否正在运行或暂停

	* 

running (default)
*
paused 暂停
*
animation-fill-mode // 规定动画结束后状态

	* 

保持结束状态 forwards
*
返回初始状态 backwards
*
animation // 所有动画属性的简写属性

二、利用百分比来声明动画

@keyframes 动画名称{
              1% {
                        transform: transformX(0);  //开始节点
                    }  
                50% {
                        transform: transformX(1200px);  //中间节点
                    }
                100% {
                        transform: transformX(1200px);  //结束节点
                    }
        }