【43】CSS3 （4）——新增属性①过渡属性

倏存

已于 2022-07-12 21:37:04 修改

阅读量192

点赞数 3

分类专栏：前端基础文章标签： css3 html 原力计划

于 2021-04-09 11:05:21 首次发布

本文链接：https://blog.csdn.net/weixin_47640160/article/details/115495523

版权

前端基础专栏收录该内容

79 篇文章 7 订阅

订阅专栏

CSS3 出现之前，前端一般使用 Flash 动画或 JavaScript 制作动画；
帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。
在不使用 Flash 动画或 JavaScript 的情况下，使用什么属性可以实现补间动画（过渡效果）？

补间动画就是知道两端的关键帧，通过计算机自己能计算出中间帧的动画

在这里插入图片描述

一、过渡属性介绍

属性名： transition
作用：在不使用 Flash 动画或 JavaScript 的情况下，使用 transition 可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），那么A和B之间就可以实现平滑的过渡的动画效果。
语法格式：transition∶ 过渡的属性过渡时间运动曲线延时时间;

二、单一属性写法

属性	描述
`transition`	简写属性，用于在一个属性中设置四个过渡属性。
`transition-property`	规定应用过渡的 CSS 属性的名称。
`transition-duration`	定义过渡效果花费的时间。默认是 0。
`transition-timing-function`	规定过渡效果的时间曲线。默认是 “ease”。
`transition-delay`	规定过渡效果何时开始。默认是 0。

1.`transition-property`介绍

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

2.时间

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

3.`transition-timing-function` 介绍

值	描述
`linear`	规定以相同速度（匀速/线性）开始至结束的过渡效果。
`ease`	规定慢（开始）→快→（结束）慢的过渡效果。
`ease-in`	规定以慢速开始的过渡效果。
`ease-out`	规定以慢速结束的过渡效果。
`ease-in-out`	规定以慢速开始和结束的过渡效果。
`cubic-bezier(x1,y1,x2,y2)`	在 cubic-bezier 函数中定义自己的值。x1、x2取是0至1之间的数值，y1、y2取值任意，四个数值表示拉扯的点的两个坐标。

3.1 贝塞尔曲线

在这里插入图片描述

三、举例

1.举例：常规情况

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>过渡属性举例①</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1{
			width: 100px;
			height: 100px;
			background-color: pink;
      /* 过渡属性：属性 过渡时间 时间曲线 延迟时间 */
       transition: all 2s linear 0s; 
		}
    .box1:hover {
      width: 400px;
      height: 300px;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
</body>
</html>

在这里插入图片描述

2. 举例：cubic-bezier 函数中定义时间曲线

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>过渡属性举例②</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box2{
		width: 100px;
		height: 100px;
		background-color: pink;
      /* 过渡属性：属性 过渡时间 时间曲线 延迟时间 */
      transition: all 2s cubic-bezier(0.9, 0.17, 0.29, 0.95) 0s;
		}
    .box2:hover {
      width: 400px;
      height: 300px;
    }
  </style>
</head>
<body>
  <div class="box2"></div>
</body>
</html>

在这里插入图片描述

四、浏览器兼容情况

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注意：Internet Explorer 9 以及更早的版本，不支持 transition 属性。
为了更方便，通常写两遍，第二遍加前缀：

transition: all 2s cubic-bezier(0.9, 0.17, 0.29, 0.95) 0s;
webkit-transition: all 2s cubic-bezier(0.9, 0.17, 0.29, 0.95) 0s;

下篇继续：【44】CSS3 （4）——新增属性②2D 转换

倏存

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【43】CSS3 （4）——新增属性①过渡属性

⚪过渡属性介绍⚪单一属性写法⚪举例⚪浏览器兼容情况
复制链接

扫一扫

专栏目录

【43】CSS3 （4）——新增属性①过渡属性

一、过渡属性介绍

二、单一属性写法

1.transition-property介绍

2.时间

3.transition-timing-function 介绍

3.1 贝塞尔曲线

三、举例

1.举例：常规情况

2. 举例：cubic-bezier 函数中定义时间曲线

四、 浏览器兼容情况

1.`transition-property`介绍

3.`transition-timing-function` 介绍

四、浏览器兼容情况