CSS3中的transition属性详解

最新推荐文章于 2024-09-09 00:15:00 发布

debugtoday

最新推荐文章于 2024-09-09 00:15:00 发布

阅读量8.2k

点赞数 3

分类专栏： css3属性文章标签： css3 css 前端

本文链接：https://blog.csdn.net/debugtoday/article/details/123069480

版权

css3属性专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS3的transition属性，包括transition-property、transition-duration、transition-timing-function和transition-delay四个子属性，解释了它们的作用和默认值。通过实例展示了如何使用这些属性实现元素的平滑过渡效果，例如改变边框圆角。此外，还提供了代码示例以帮助理解。

摘要由CSDN通过智能技术生成

一、语法：transition: property duration timing-function delay

1、transition是个复合属性，它包括以下几个子属性

transition-property ：规定设置过渡效果的css属性名称

transition-duration ：规定完成过渡效果需要多少秒或毫秒

transition-timing-function ：指定过渡函数，规定速度效果的速度曲线

transition-delay ：指定开始出现的延迟时间

2、默认值为：all 0 ease 0

3、改变多个css属性的过渡效果时：

a{ transition: background 0.8s ease-in 0.3s,color 0.6s ease-out 0.3s;}

二、子属性：

1、transition-property

transition-property: none |all |property;

值为none时，没有属性会获得过渡效果，值为all时，所有属性都将获得过渡效果，值为指定的css属性应用过渡效果，多个属性用逗号隔开

2、transition-duration

transition-duration：time;

该属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间

3、transition-timing-function

该属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，ease:由快到慢到更慢、linear:恒速、ease-in:越来越快、ease-out:越来越慢、ease-in-out:先加速后减速、cubic-bezier(n,n,n,n)可以中定义自己的值，如 cubic-bezier(0.42,0,0.58,1)

4、transition-delay

过渡效果开始前的延迟时间，单位秒或者毫秒

三、举个应用例子

div {
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 20px auto;
  border-radius: 100%;
  -webkit-transition-property: -webkit-border-radius;
  transition-property: border-radius;
  -webkit-transition-duration: 3s;
  transition-duration: 3s;
  -webkit-transition-timing-function：ease;
 transition-timing-function：ease;
 
div:hover {
  border-radius: 0px;
}