CSS动画

笔记放在Github上，点击访问下载

---

CSS动画-animation

1. 先声明动画，也可以用0%到100%，其中myani是动画的名字

		@keyframes myani{
			from{
				width: 100px;
				background-color: cyan;
			}
			/*50%{
				width: 200px;
			}*/
			to{
				width: 300px;
				background-color: coral;
			}
		}

2. 在相应的div中配置动画
   animation-name: myani; 使用@keyframes中声明的动画
   animation-duration: 2s; 动画的持续时间 默认是0s
   animation-delay: 2s; 动画的延迟执行 默认是0s
   animation-iteration-count: 2; 动画重复次数 infinite;无限次
   animation-direction: normal; 动画的执行顺序 默认从第一帧到最后一帧
   animation-direction: reverse; 每次都是从最后一帧到第一帧
   animation-direction: alternate; 奇数次执行，从第一帧到最后一帧 偶数次执行，从最后一帧到第一帧
   animation-direction: alternate-reverse; 奇数次执行，从最后一帧到第一帧 偶数次执行，从第一帧到最后一帧

• 填充模式
  animation-fill-mode: backwards; 在动画等待时间内，将准备播放的帧的动画填充到元素上
  animation-fill-mode: forwards; 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
• 动画在执行中变化的速率
  animation-timing-function: ease; 默认值
  animation-timing-function: ease-in; 先慢后快
  animation-timing-function: ease-out; 先快后慢
  animation-timing-function: ease-in-out; 先慢再快后慢
  animation-timing-function: linear; 线性增长
• 动画播放状态控制
  animation-play-state: running; 运行状态
  animation-play-state: paused; 暂停动画

---

动画过渡 transition

transition: width 2s linear 1s,background 2s linear 1s;
分别表示过渡属性，持续时间，速度曲线，过渡延迟
如果控制多个属性过渡用all transition: all 2s linear 1s;

动画变形 transform

1. transform-origin 变形的原点的位置，默认值为50% 50% 0
   transform-origin: left top; transform-origin: 20px 20px;

2. 旋转 rotate
   transform: rotateX(0deg);
   transform: rotateY(0deg);
   transform: rotateZ(0deg); rotate();与Z一致

3. 倾斜 skew
   transform: skewX(0deg);
   transform: skewY(0deg);
   transform: skew(0deg,0deg);

4. 缩放 scale
   transform: scale(1);
   transform: scale(0.5);
   等比例缩放

5. 移动 translate
   transform: translate(0,0);
   transform: translate(100px,200px);

---

媒体查询

	style{
		/* 
			<768    超小屏
			768-992  小屏
			992-1200 中屏
			>1200    大屏
		 */
		@media screen and (min-width: 1200px) {
			div{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
		}
		/*992-1200 中屏*/
		@media screen and (min-width: 992px) and (max-width: 1200px) {
			div{
				width: 200px;
				height: 200px;
				background-color: green;
			}
		}
		/*768-992*/
		@media screen and (min-width: 768px) and (max-width: 992px) {
			div{
				width: 200px;
				height: 200px;
				background-color: coral;
			}
		}
		/*<768*/
		@media screen and (max-width: 768px) {
			div{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		}
	}