animation和transform的学习笔记

一、animation是什么？

Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。

过渡和动画之间的异同

• 不同点
  过渡必须人为的触发才会执行动画
  动画不需要人为的触发就可以执行动画

• 相同点
  过渡和动画都是用来给元素添加动画的
  过渡和动画都是系统新增的一些属性
  过渡和动画都需要满足三要素才会有动画效果

animation-name

指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画

• 通过@keyframes来设置动画序列，序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间，也可以通过from关键字表示。100%表示动画的结束时间，也可以通过to关键字表示。

 关键帧：
​		   @keyframes animiationName{
​                 keyframes-selector{
​                      css-style;
​                 }
​			}

animation-duration

动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长

• time 指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。

animation-timing-function

设置动画将如何完成一个周期，告诉系统动画执行的速度

linear	//动画从头到尾的速度是相同的。	
ease	//默认。动画以低速开始，然后加快，在结束前变慢。	
ease-in	//动画以低速开始。	
ease-out	//动画以低速结束。	
ease-in-out	  //动画以低速开始和结束。	
cubic-bezier(n,n,n,n)	//在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-delay

设置动画在启动前的延迟间隔。

• time 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0

animation-iteration-count

定义动画的播放次数。告诉系统动画需要执行几次

n	//一个数字，定义应该播放多少次动画
infinite   //无限次往返执行

animation-direction

指定是否应该轮流反向播放动画。

normal   //默认的取值, 执行完一次之后回到起点继续执行下一次
alternate  //往返动画, 执行完一次之后往回执行下一次
reverse    //反向执行 

animation-fill-mode

规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

none: //不做任何改变
forwards: //让元素结束状态保持动画最后一帧的样式
backwards: //让元素等待状态的时候显示动画第一帧的样式
both: //让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

animation-play-state

running:  //执行动画
paused:   //暂停动画

告诉系统当前动画是否需要暂停

二、transform

transform 属性向元素应用从2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或者倾斜。

旋转 rotate

transform: rotate(45deg);
其中deg是单位, 代表多少度

平移 translate

transform: translate(100px, 0px);
​ 第一个参数:水平方向
​ 第二个参数:垂直方向

缩放 scale

transform: scale(1.5);
transform: scale(0.5, 0.5);
​ 第一个参数:水平方向
​ 第二个参数:垂直方向

• 注意点:
  ​ 如果取值是1, 代表不变
  ​ 如果取值大于1, 代表需要放大
  ​ 如果取值小于1, 代表需要缩小
  ​ 如果水平和垂直缩放都一样, 那么可以简写为一个参数

综合转换连写格式

transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);

• 注意点:
  ​ 1.如果需要进行多个转换, 那么用空格隔开
  ​ 2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的

形变中心点

transform-origin:
​ 第一个参数:水平方向
​ 第二个参数:垂直方向
注意点
​ 取值有三种形式
​ 具体像素
​ /transform-origin: 200px 0px;/
​ 百分比
​ /transform-origin: 50% 50%;/
​ /transform-origin: 0% 0%;/
​ 特殊关键字
​ /transform-origin: center center;/
​ 默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点

旋转轴向

默认情况下所有元素都是围绕Z轴进行旋转

transform: rotateZ(45deg);
​                围绕z轴旋转
transform: rotateX(45deg);
​                围绕x轴旋转
transform: rotateY(45deg);
​                围绕y轴旋转

总结:
​ 想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可

---