（25）css3过渡属性transition

最新推荐文章于 2024-03-18 21:52:36 发布

泽哥ins

最新推荐文章于 2024-03-18 21:52:36 发布

阅读量1k

点赞数

分类专栏： CSS3 文章标签： css3 动画 html

本文链接：https://blog.csdn.net/qq_36213140/article/details/121920749

版权

CSS3 专栏收录该内容

53 篇文章 5 订阅

订阅专栏

本文介绍了CSS3的transition属性如何在不依赖Flash或JavaScript的情况下，为网页元素提供平滑过渡动画。内容包括过渡属性的语法、单一属性写法、时间曲线以及贝塞尔曲线的运用，并通过示例代码展示了如何创建简单的宽高变化过渡效果。此外，还提及了transition的浏览器兼容性，指出InternetExplorer10及以上版本以及主流浏览器支持此属性。

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

一、动画效果

CSS3 出现之前，前端一般使用Flash 动画或 JavaScript 制作动画。

帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。例如，photoshop（简称：ps）软件的时间轴中的帧动画制作。

二、过渡属性transition作用

作用：在不使用 Flash 动画或 JavaScript 的情况下，使用 transition 可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），那么A和B之间就可以实现平滑的过渡的动画效果。为了方便看效果，我们使用 :hover 切换状态。

三、过渡属性transition语法格式

四、单一属性写法

4.1transition-property过渡的属性

none 表示没有属性过渡
all 表示所有变化的属性都过渡
属性名使用具体的属性名，多个属性名中间逗号分隔

4.2时间

过渡时间：以s秒为单位。

延时时间：以s秒为单位。0s也必须加单位。

4.3transition-timing-function时间曲线

4.4贝塞尔曲线

五、transition过渡属性示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css3transition过渡属性</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink; 
      /* transition-property: all;
      transition-duration: 2s;
      transition-timing-function: ease;
      transition-delay: 2s; */
      /* 简写方式 */
      transition: all 2s ease 2s;
    }
    div:hover {
      width: 500px;
      height: 500px;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>