css transform transition animation总结笔记

transform：是一种改变元素样式的手段，与transition，animation有质的区别，即单独使用transform并没有动画效果
transition：过渡效果，基本使用就是

.button_box:hover{
	transition:all 3s;
    height: 200px;
    background-color: #3b9bf9;
}

这是鼠标滑过效果的代码，若想要点击效果，则需要使用动态添加class实现
animation：动画效果，基本使用就是先定义@keyframes再配置

	@keyframes scaleDraw {
		/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
		0% {//这里面可以填任意属性
			transform: scale(0);
			/*开始为原始大小*/
		}

		100% {
			transform: scale(1);
		}
	}

	.box{
		 animation-name: scaleDraw;
		/*关键帧名称*/
		animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		animation-iteration-count: 1;
		/*动画播放的次数*/
		animation-duration: 0.5s;
		/*动画所花费的时间*/
	}

transition和animation区别：
1、transition需用比如CSS的状态选择器（如:hover）或 借助JavaScript来触发 ，animation 不但可以使用上面的方式触发, 更重要的是可以自动触发 。
2、animation 比transition能达到的效果更多
3、animation 需定义@keyframes再配合animation 使用，transition可直接使用

详细可见下解释

1. Transition 强调过渡; Animation 强调流程与控制 。


2. 两者的控制粒度不一样
   1. 某种程度上, transition 更加粗一点, 比如过渡的速度进行了封装, 可以控制是匀速改变还是贝塞尔曲线之类的。
   2. animation 提供的 keyframe 方法, 可以让你手动去指定每个阶段的属性; 此外 animation 还封装了循环次数, 动画延迟等功能, 更加自由和强大。

3. 动画状态: 
   1. CSS的 transition 只有两个状态:开始状态 和 结束状态 。
   2. animation 可能是多个状态, 有帧的概念 。
   
4. 动画触发方式:
   1. CSS的transition需要借助别的方式来触发, 比如CSS的状态选择器（如:hover）或 借助JavaScript来触发 。
   2. animation 不但可以使用上面的方式触发, 更重要的是可以自动触发 。
   
5. animation 控制动效上要比 transition 强，因为它具备一些控制动效的属性，比如“播放次数”、“播放方向”、“播放状态”等。

6. 动画实现的范围:
   1. transition 是有一定限制的, 并不是所有 CSS 的属性都具有过渡效果 。
   2. 另外相比而言, CSS 的 animation 要比 transition 强大的多, 几乎所有的 css 属性都可以实现动画效果。
   3. 这也是为什么使用 animation 制作 Web 动画的场景更多 。
   
7. 动画实现方式
   1. CSS 的 animation 是离不开 @keyframes 的，换句话说，我们需要先使用 @keyframes 来注册一个动画效果，即帧来描述动画效果。
   2. 当然，只注册也不见得有效果，还是需要使用 animation-name 属性引用 @keyframes 注册好的动画效果。