CSS过渡、变形与动画介绍

学习目标

掌握CSS3过渡

掌握transition的子属性

掌握CSS3动画

 

      什么是过渡？

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

语法规则

选择器{

  transition:property duration timing-function delay

}

tansition属性实现简单的动画效果

transition属性是一个复合属性，主要包含property、duration、timing-function、delay等子属性

transition属性的常用子属性主要包括：

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

CSS变形

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

倾斜、旋转、缩放、移动

语法规则

选择器{

  transform:n