CSS3中Transition动画属性用法详解

CSS3中的transition是一种CSS属性，它用于在元素的属性发生变化时，控制元素以多长时间和以什么方式进行平滑过渡。transition动画可以通过CSS3的-transition和-transition-*系列属性来实现。

transition属性

语法

transition是一个所有transition属性的缩写属性，它的语法如下：

transition: property duration timing-function delay;

• property: 要过渡的CSS属性名称（可以是多个属性，使用逗号分隔）
• duration: 过渡的持续时间（单位可以是s或ms）
• timing-function: 过渡的速度曲线函数（如ease, linear, ease-in, ease-out等）
• delay: 过渡开始之前的延迟时间（单位可以是s或ms）

示例

下面的例子演示了如何使用transition将颜色从红色过渡到绿色：

div {
  background-color: red;
  transition: background-color 1s ease;
}

div:hover {
  background-color: green;
}

transition-property属性

transition-property属性用于指定要添加过渡动画的CSS属性。它的值可以是一个CSS属性，多个CSS属性，或者是关键字'all'，代表所有属性都会被添加过渡动画。

语法

transition-property: none | all | property-name [, ...];

示例

下面的例子演示了如何使用transition-property将颜色和圆角从初始值过渡到新值：

div {
  background-color: red;
  border-radius: 50%;
  transition-property: background-color, border-radius;
  transition-duration: 2s;
  transition-timing-function: ease;
}

div:hover {
  background-color: green;
  border-radius: 0%;
}

transition-duration属性

transition-duration属性用于指定过渡动画的持续时间，它接收一个单位为秒或毫秒的时间值。

语法

transition-duration: time;

示例

下面的例子演示了如何使用transition-duration将颜色从红色过渡到绿色，过渡时间为2秒：

div {
  background-color: red;
  transition-property: background-color;
  transition-duration: 2s;
}

div:hover {
  background-color: green;
}

transition-timing-function属性

transition-timing-function属性用于指定过渡动画的速度曲线函数，它的值可以是CSS3提供的关键字，并且也可以是自定义的曲线函数。

语法

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

示例

下面的例子演示如何使用transition-timing-function将颜色从红色过渡到绿色，采用ease-in-out速度曲线函数：

div {
  background-color: red;
  transition-property: background-color;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
}

div:hover {
  background-color: green;
}

transition-delay属性

transition-delay属性用于指定过渡动画开始之前的延迟时间，它接收一个单位为秒或毫秒的时间值。

语法

transition-delay: time;

示例

下面的例子演示了如何使用transition-delay将颜色从红色过渡到绿色，延迟1秒后开始过渡：

div {
  background-color: red;
  transition-property: background-color;
  transition-duration: 2s;
  transition-delay: 1s;
}

div:hover {
  background-color: green;
}

通过以上的示例，可以发现transition动画属性十分灵活，可以实现各种各样的动画效果。建议在实际项目中多加尝试，从而掌握更多的动画效果。