CSS3笔记(3)——过渡效果+动画+变形

一、过渡效果

1. 过渡时间 transition-duration 属性

语法

1

transition-duration: time;

• time: 规定完成过渡效果需要花费的时间（以秒或毫秒计）。 默认值是 0，意味着不会有效果。

  2. 过渡效果 transition-property 属性

  语法

  1	transition-property: none | all | property;

• none: 没有属性会获得过渡效果。
• all: 所有属性都将获得过渡效果。
• property: 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

  3. 过渡延迟时间 transition-delay 属性

  语法

  1	transition-delay: time;

• time: 指定秒或毫秒数之前要等待切换效果开始。

  4. 过渡速度 transition-timing-function 属性

  语法

  1	transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);

• linear: 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
• ease : 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
• ease-in: 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
• ease-out: 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
• ease-in-out: 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
• cubic-bezier(n,n,n,n): 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

  5. 简易表示法 transition 属性

  语法

  1	transition: transition-property transition-duration transition-timing-function transition-delay;

  二、动画

  1. 关键帧 @keyframes

  语法

  1 2 3

  @keyframes animationname { keyframes-selector {css-styles;} }

  

2. 运用关键帧 animation-name 属性

语法

1

animation-name: keyframename | none;

3. 动画时间 animation-duration 属性

语法

1

animation-duration: time;

4. 变速方式 animation-timing-function 属性

语法

1

animation-timing-function: value;

5. 动画次数 animation-iteration-count 属性

语法

1

animation-iteration-count: n | infinite;

6. 重复执行的方向 animation-direction 属性

animation-direction 属性定义是否循环交替反向播放动画。

语法

1

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;

7. 动画暂停/继续 animation-play-state 属性

语法

1

animation-play-state: paused | running;

8. 延迟时间 animation-delay 属性

语法

1

animation-delay: time;

9. 延迟与完成样式 animation-fill-mode 属性

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

默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。

语法

1

animation-fill-mode: none | forwards | backwards | both | initial | inherit;

10. 简易表示法 animation 属性

语法

1
2

animation: animation-name animation-duration animation-timing-function animation-delay 
           animation-iteration-count animation-direction animation-fill-mode animation-play-state;

三、变形

1. 变形 transform 属性

transform 属性应用于元素的2D或3D变形。这个属性允许将元素旋转，缩放，移动，倾斜等。

2D变形可分为下列几种：

• 移动：translate()、translateX()、translateY()
• 缩放：scale()、scaleX()、scaleY()
• 旋转：rotate()
• 倾斜：skew()、skewX()、skewY()
• 矩阵：matrix()

3D变形可分为下列几种：

• 移动：translate3d()、translateZ()
• 缩放：scale3d()、scaleZ()
• 旋转：rotate3d()、rotateX()、rotateY()、rotateZ()
• 透视：perspective()
• 矩阵：matrix3d()

语法

1

transform: none | transform-functions;

2. 变形基准点 transform-origin 属性

transform-origin 属性可以设定变形时的基准点。默认基准点在元素中心，即对于2D，默认为(50%，50%)，对于3D，默认为(50%，50%，50%)。

语法

1

transform-origin: x-axis y-axis z-axis;

3. 视点距离 perspective 属性

perspective 属性用于设置视点距离，其与 perspective() 函数的区别：

• perspective()函数: 设置元素自身的视点距离
• perspective属性: 设置子元素的视点距离

语法

1

perspective: number | none;

4. 透视基准点 perspective-origin 属性

perspective-origin 属性可以设定透视基准点。默认基准点在元素中心，即为(50%，50%)。
语法

1

perspective-origin: x-axis y-axis;

5. 嵌套元素显示方式 transform-style 属性

transform-style 属性指定嵌套元素是怎样在三维空间中呈现。

语法

1

transform-style: flat | preserve-3d;

6. 背面显示 backface-visibility 属性

backface-visibility 属性定义当元素背面向屏幕时是否可见。

语法

1

backface-visibility: visible | hidden;