CSS过渡、变形与动画

CSS3过渡

什么是过渡？

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果

语法规则

选择器{
	transition:property duration timing-function delay
}

• tansition属性实现简单的动画效果
• transition属性是一个复合属性，主要包含property、duration、timing-function、delay等子属性

transiton子属性

• property：规定应用过渡的CSS属性的名称

  取值：
  none：没有属性会获得过渡效果
  all：默认值，所有属性获得过渡效果
  property:定义 应用过渡效果的CSS属性名称列表

• duration：定义过渡效果花费的时间

  取值：
  time值：以秒或毫秒计，默认是0，意味着没有任何效果

• timing-function：规定过渡效果的时间曲线

  取值：
  linear:规定以相同速度开始至结束的过渡效果
  ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
  ease-in：规定以慢速开始的过渡效果
  ease-out：规定以慢速结束的过渡效果
  ease-in-out：规定以慢速开始和结束的过渡效果
  cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值

• delay：规定开始之前需要等待的时间

  取值：
  time值：以秒或毫秒计，默认是0

CSS3变形

transform属性允许对元素应用2D转换，常见的2D转换：

• translate() 方法

  translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

• rotate() 方法

  rotate() 方法根据给定的角度顺时针或逆时针旋转元素。

• scale() 方法

  scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。

• scaleX() 方法
  scaleX() 方法增加或减少元素的宽度。

• scaleY() 方法
  scaleY() 方法增加或减少元素的高度。

• skew() 方法
  skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。

• skewX() 方法
  skewX() 方法使元素沿 X 轴倾斜给定角度。

• skewY() 方法
  skewY() 方法使元素沿 Y 轴倾斜给定角度。

• matrix() 方法

  matrix() 方法把所有 2D 变换方法组合为一个。
  matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

CSS3动画

关键帧

关键帧表示动画过程中的一个状态，多个关键帧就可以形成一组绚丽的动画。

语法规则

@keyframes animationname{
	keyframes-selector{css-style}
}

• animationname是当前动画的名称
• keyframes-selector:是关键帧选择器
• css-style:当前关键帧的动画状态

animation属性

animation属性，用于设置动画的名称、时间、时间曲线等属性，它是一个复合属性。

语法规则

选择器{
	animation:name duration timing-function 
		delay iteration-count 
}

tansform-functions:用于设置变形函数，可以是一个或多个变形函数列表
eg.

div:hover{
      animation: rotate 0.5s
			   linear infinite
   }

animation子属性

• animation-name：规定@keyframes动画的名称

   取值：
   keyframe name：规定需要绑定到选择器的keyframe的名称
   none:规定无动画效果（可用于覆盖来自级联的动画)
  

• animation-duration：规定动画完成一个周期所花费的时间

   取值：
   time值：以秒或者毫秒计算，默认是0
  

• animation-timing-function：规定过渡效果的时间曲线

   取值：
   linear:规定以相同速度开始至结束的过渡效果
   ease：规定慢速开始，然后变快，然后慢速结束的过渡效果。
   ease-in：规定以慢速开始的过渡效果
   ease-out：规定以慢速结束的过渡效果
   ease-in-out：规定以慢速开始和结束的过渡效果
   cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。
  

• animation-delay：规定开始之前需要等待的时间

   取值：
   time值：以秒或毫秒计，默认是0
  

• animation-iteration-count：规定动画播放的次数

   取值：
   n：定义动画播放次数的数值，默认为1
   infinite：规定动画应该为无限次播放