CSS3过渡与动画

一、过渡transition

特点：

1. 过渡是两个状态之间的过渡，只能从一种状态过渡到另一种状态
2. 过渡需要事件触发，不能自动执行

综合属性:

可以同时控制多个属性进行过渡，多个属性之间用逗号隔开

CSS

transition: width 2s linear 1s,height 2s linear 1s;

拆分属性：

• transition-property：

  • 定义过渡的属性名(样式名称)，比如width height border
  • 可以具体的样式属性名，也可以使用关键字 all(所有属性共用同样的效果)

• transition-duration:

  • 定义动画持续时间 单位是 秒/s

• transition-delay:

  • 延迟执行，延迟时间，单位是秒/s

• transition-timing-function：

  • 定义动画函数曲线
  • 取值：
    • ease : 先快后慢
    • ease-in ：越来越快
    • ease-out: 越来越慢
    • ease-in-out：先慢再快再慢
    • liner：匀速直线运动
    • cubic-bezier()：贝赛尔曲线 cubic-bezier(.17,.67,.83,.67)

​ 贝赛尔曲线可视化网站

二、动画animation

特点：

1. 动画是多个状态之前的改变
2. 动画可以自动执行，不需要事件触发
3. 动画通过 @keyframes 定义关键帧 定义动画

综合属性：

CSS

animation: name duration timing-function delay iteration-count direction fill-mode;
属性名：动画名 动画持续时间 动画函数曲线 延迟执行  定义动画的执行次数  定义动画执行顺序  定义动画执行后保留的状态

拆分属性：

• animation-name: 引用动画的名字（定义动画的名字）
• animation-duration: 动画持续时间
• animation-timing-function: 动画函数曲线
• animation-delay： 延迟执行
• animation-iteration-count： 定义动画的执行次数
  • 指定动画无限执行：infinite
• animation-direction： 定义动画执行的顺序
  • 取值：alternate 默认值
  • alternate-reverse 动画先反向执行，然后再正向执行，必须结合 iteration-count 属性一起使用才有效果；动画至少要执行两次
  • reverse 动画反向执行
• animation-fill-mode: 定义动画执行结束后保留的状态
  • 取值：forword 动画保留终点状态
  • backwards 默认值，动画保留起点状态
  • both 动画将遵循forwards 和 backwards 的规则，从而再两个方向上扩展动画属性

通过@keyframes name{} 定义动画：

1.from-to

CSS

@keyframes name{
	from{
		起点状态
	}
	to{
		终点状态
	}
}

2.百分比

@keyframes name{
	0%{
		起点状态
	}
	n%{
		定义多个中间状态
	}
	100%{
		终点状态
	}
}

三、2D与3D变换transform

含义：

transform属性 ：定义2D（平面）和3D（三维场景）变换

注意：元素的变换中心默认是元素的中心点

取值：

1. 旋转 rotate() 单位角度 deg; 取值可正可负，顺时针（正直）或者逆时针（负值）

2. 平移 translate(x,y) 指定x轴和y轴的平移

   1. px 单位：可正可负
   2. 百分比
   3. 特点：平移的元素类似于相对定位
   CSS

    translate(200px);	x轴移动
    translate(200px,200px)	x轴和y轴移动
   

3. **缩放 scale(n) ** n 代表缩放的比例

             n >1 : 放大 n 倍

             n < 1 : 缩小 n 倍

4. 斜切 skew(x,y) 单位：角度 deg 取值可正可负