CSS中的过渡知识点整理

最新推荐文章于 2024-02-28 15:55:58 发布

ranup

最新推荐文章于 2024-02-28 15:55:58 发布

阅读量859

点赞数

分类专栏： HTML5+CSS3 文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_57533638/article/details/124872308

版权

HTML5+CSS3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

过渡

文章目录

过渡

动画和过渡的区别

动画和过渡类似，都是可以实现一些动态的效果；
不同的是过渡需要在某个事件来触发，而动画可以自动触发动态效果；
设置动画效果，必须先要设置一个关键帧（@keyframes），关键帧设置了动画执行每一个步骤。

过渡的概率

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

作用

可以指定一个属性发生变化时的切换方式；
可以创建一些非常好的效果，提升用户的体验。

过渡的连写方式

指定过渡属性

transition-property 指定要执行过渡的属性。

none：没有属性获得过渡
all：给所有属性都设置上过渡
property：定义多个过渡效果的 CSS 属性名称列表，列表以逗号分隔

比如：transition-property: all; transition-property: height , width;

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* transition-property: all; */
    /* 两种方式效果一样 */
    transition-property: width, height;
  }

  div:hover {
    width: 200px;
    height: 200px;
  }
</style>
<body>
	<div></div>
</body>

在这里插入图片描述

过渡持续时间

transition-duration 设置过渡效果的执行时间，也就是过渡完成一个周期所花费的时间。

时间单位可以选择s 或者ms （1s = 1000ms），时间越长，过渡的动画效果就会越慢。

比如：transition-duration: 4s; transition-duration: 100ms, 2s;

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: pink;
    transition-property: all;
    transition-duration: 2s;
  }

  div:hover {
    width: 200px;
    height: 200px;
  }
</style>
<body>
	<div></div>
</body>

在这里插入图片描述

过渡的速度曲线

transition-timing-function 设置过渡切换效果的速度。

可以设置的值：

ease：先加速在减速，默认
ease-in：加速
ease-out：减速
ease-in-out：以低速开始和结束
linear：匀速
steps(int,start|end)：间隔数量 (步长)
- int：间隔数，是一个正整数（大于 0）
- start：可选，动画的第一帧会被立即执行，直接从第二帧开始，然后以第一帧结束
- end：可选，从第一帧开始到正常结束，默认
cubic-bezier(n,n,n,n)：设置自己想要的值，值可以是从 0 到 1 的数值
steps(int,start|end)：间隔数量 (步长)
- int：间隔数，是一个正整数（大于 0）
- start：可选，在时间开始时执行过渡
- end：可选，在时间结束时执行过渡，默认

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: pink;
    transition-property: all;
    transition-duration: 2s;
    /* transition-timing-function: steps(2, start); */
    transition-timing-function: steps(2);
  }

  div:hover {
    width: 200px;
    height: 200px;
  }
</style>
<body>
	<div></div>
</body>

steps(2,start)效果

steps(2)效果

过渡的延迟

animation-delay 设置过渡什么时候开始，也就是延迟时间是多久。 (默认是0)

比如：transition-delay: 2s;

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: pink;
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: steps(2);
    transition-delay: 2s;
  }

  div:hover {
    width: 200px;
    height: 200px;
  }
</style>
<body>
	<div></div>
</body>

在这里插入图片描述

过渡的简写方式

transition 可以同时设置过渡相关的所有属性，多个过渡效果用,分隔。

注意：如果既有持续时间，也有延迟时间，则 第一个 是 持续时间 ，第二个 是 延迟时间。

语法：transition：要过渡的属性持续时间速度曲线延迟时间；

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: pink;
    transition: all 2s steps(2) 2s;
  }

  div:hover {
    width: 200px;
    height: 200px;
  }
</style>
<body>
	<div></div>
</body>