2.CSS 使用 transition过渡属性和 transform变化属性实现动画效果

最新推荐文章于 2024-09-03 16:55:20 发布

二七 ♪

最新推荐文章于 2024-09-03 16:55:20 发布

阅读量1.5k

点赞数 24

文章标签：前端 css3

本文链接：https://blog.csdn.net/m0_62536448/article/details/139838482

版权

前言

在实现鼠标悬浮时盒子上移的动画效果时，发现盒子移动地很死板并且由于给盒子添加了浮动的属性，盒子一上移下面的盒子就会有了空间而改变位置，在使用了transition和transform属性后很好地解决了这些问题，借此文章来记录一下transition和transform属性的基本使用。

一、transition 属性的基本使用

CSS 过渡通常使用简写属性 transition 控制，可以决定哪些属性发生动画效果（通过明确地列出这些属性），何时开始（通过设置延时），持续多久（通过设置时长）以及如何动画（通过定义缓动函数，比如线性或先快后慢）。

transition其实是transition-property、transition-duration、transition-timing-function、transition-delay的组合的简写属性，它可以由两个、三个或者四个值来根据需求组合运用。

1、transition-property 属性

指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其他属性仍如通常那样瞬间变化。

2、transition-duration 属性

以秒或毫秒为单位指定过渡动画所需的时间，默认值是 0s，表示不出现过渡动画。

注意： 可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。

例如：

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}
//将被视为如下样式
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

3、transition-timing-function 属性

指定一个函数，定义属性值怎么变化。缓动函数定义属性如何计算。大多数缓动函数由四点定义一个立方贝塞尔曲线。也可以从 Easing Functions Cheat Sheet 选择缓动效果。

以下列出几个常用的函数：

linear：匀速均匀变化

ease：开始的时候很慢，中间加快变化，最后减速渐渐停止

ease-in：开始的时候很慢进入，之后匀速变化

ease-out：开始的时候匀速变化，最后减速变化

ease-in-out：开始的时候很慢，中间匀速变化，最后减速渐渐停止

4、transition-delay 属性

指定以秒（s）或毫秒（ms）为单位的延迟时间，即属性开始变化时与过渡开始发生时之间的时长，也就是等待延迟时间后再开始过渡。和transition-duration 一样，它也可以指定多个时间。

5、transition 组合使用

① 当transition取值是两个时，表示过渡属性（transition-property）、过渡时间（transition-duration）

例如 transition：margin-top 0.5s，表示过渡的属性是margin-top，过渡需要时间为0.5s。

② 当transition取值是三个时，表示过渡属性（transition-property）、过渡时间（transition-duration）、过渡延迟时间（transition-delay）（或者过渡函数）

例如 transition: margin-right 4s 1s; 或者 transition: margin-right 4s ease;

③ 当transition取值是四个时，表示过渡属性（transition-property）、过渡时间（transition-duration）、过渡函数（transition-timing-function）、过渡延迟时间（transition-delay）

例如 transition: margin-right 4s ease 5s;

transition 还可以给多个属性同时定义过渡，中间用逗号隔开，如下

transition:
  margin-right 4s,
  margin-top 4s ease 1s,
  color 1s;

注意！过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果，可以在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

//需要和伪类选择器搭配使用实现两个状态变化
 <style>
      .box {
        border-style: solid;
        border-width: 1px;
        display: block;
        width: 100px;
        height: 50px;
        background-color: #a0d9f7;
     //过渡属性
        transition: width 2s ease-in-out, background-color 2s;
      }

      .box:hover {
        background-color: #f7a0e4;
        width: 500px;
      }
    </style>

  <body>
    <p>鼠标悬浮时盒子开始慢中间匀速最后慢，并且颜色变粉色。</p>
    <div class="box">盒子</div>
  </body>