基础学习16 c3 动画

CSS3动画

一：过渡

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

帧动画：通过一帧一帧的画面按照固定顺序和速度播放。

补间动画是各个状态的连接（关键帧）

语法格式:

transition: 要过渡的属性  花费时间  运动曲线  何时开始;

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

案例：手风琴

二：变形 transform

2D 转换：平移translate、旋转rotate、缩放scale、倾斜skew【skju】

2D 转换方法：

• translate()

  使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

  可以改变元素的位置，x、y可为负值；

   translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
   translateX(x)仅水平方向移动（X轴移动）
   translateY(Y)<