【CSS3】transform，transition，animation，回流，重绘

李小浦

已于 2024-02-18 12:35:07 修改

阅读量412

点赞数

分类专栏： # CSS 文章标签： css

于 2022-12-13 16:49:12 首次发布

本文链接：https://blog.csdn.net/partworld/article/details/128289930

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

❤️ Author：老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事乐观面对
😍 系列专栏：

transform

这是一个css属性，这个属性可以帮助我们对某一个元素进行某些形变，包括旋转，缩放，倾斜，平移等
我们需要掌握平移：translate(x,y)，缩放：scale(x,y)，旋转：rotate(deg)，倾斜：skew(deg,deg)

translate

用于移动元素在平面上的位置，translate(x,y)
例子：transform：translate(100px)
还有translateX()，translateY()

<!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>Document</title>
    <style>
      .container {
        display: inline-block;
        border: 5px solid #f00;
      }
      .container .box {
        width: 200px;
        height: 200px;
        background-color: orange;
        /*如果使用百分比的话，百分比是相对于自身的，如果是x位移，参考的是自身的宽度，y位移同理*/
        transform: translate(100px，100px);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

在这里插入图片描述

translate完成水平和垂直居中方案

水平居中：

行内级：父元素text-align：center
块级：前提是设置块级元素(宽度) margin：0 auto
绝对定位：前提是有宽度的情况下，left0/right0/margin:0 auto
flex：justify-content：center
垂直居中
绝对定位：前提是有高度的情况下，top0/bottom0/margin:auto 0;但是这个是有弊端的，1.必须是使用定位的，这样就脱离标准流了，2.必须给元素设置高度
flex：align-items：center
top/translate：1.先让元素向下位移父元素的50%，这里需要用定位，不能用margin-top:50%，因为margin-top的百分比是相对于父元素的宽度 2.让元素向上位移自身的50%

<!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>Document</title>
    <style>
      .container {
        height: 300px;
        background-color: orange;
      }
      .container .box {
        display: inline-block;
        background-color: #f00;
        height: 100px;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">coder</div>
    </div>
  </body>
</html>

scale

这个可以改变元素的大小，scale(x,y)

在这里插入图片描述

rotate

实现旋转，一个值，表示旋转的角度，常用的单位是deg，正数为顺时针，负数为逆时针
旋转的原点受transform-origin的影响
例子：transform：rotate(90deg)

transition

transition提供了一种在更改css属性时控制动画速度的方法，而不是立即生效

<!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>Document</title>
  <style>
    div {
      height: 200px;
      width: 200px;
      color: blue;
      transition-property: height, color;
      transition-duration: 2s, 5s;
      transition-timing-function: linear, ease;
      transition-delay: 1s, 1.5s;
    }

    div:hover {
      color: red;
      height: 500px;
    }

    * {
      background-color: rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 0 1px red;
    }

  </style>
</head>

<body></body>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla debitis inventore maxime veritatis quidem eaque quas
  officiis. Sed, consequuntur tempora reiciendis sapiente placeat fuga consequatur? Ad blanditiis maxime quia ipsa.
</div>
</body>

</html>

}

transition-property

指定应用过度属性的名称，可以写all表示所有可动画的属性

transition-duration

渐变时间，一般是秒做单位

transition-timing-function

值有，ease(先慢后快再慢)，linear(匀速)，ease-in（先慢后快然后突然停止），ease-out（先快后慢然后突然停止），steps(5)：这个是5步跳过去。
现在一般的电脑都是60赫兹的，意思就是一秒钟电脑有60张图片闪过，所以如果transition-duration:2s,那么steps最多就是120，再多就没用了。
如果是steps(5,start)，这个就是从开头开始跳，因为如果跳五步，就会有六个分点，数字后面什么也不加，就会先停一下然后开始跳，如果加了start就是直接开始跳，还有end，jump-both(这个就会多跳一步)

transition-delay

正值就是延迟一会，负值就是已经播了一会

心跳动画

<!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>Document</title>
  <style type="text/less">
    .twitter-heart1{
      background-image: url(1_MTZW1G1mE7LSX1CnhTYeHA.png);
      width : 100px;
      height : 100px;
      border: 5px solid;
      transition: none;
        &:hover{
          transition: 1s steps(28);
          background-position: -2800px 0;
      }
    }
    .twitter-heart2{
      width: 100px;
      height:100px;
      border : 5px solid red;
      position : relative;
      overflow:hidden;
      img{
        position: absolute;
        left : 0;
        transition : none;
        &:active{
          transition : 1s steps(28);
          left: -2800px;
        }
      }
    }
    input{
     display: none;
     }
    input +.twitter-heart3{
      cursor: pointer;
      background-image: url(1_MTZW1G1mE7LSX1CnhTYeHA.png);
      width : 100px;
      height : 100px;
      display: inline-block;
      border: 5px solid;
    }
    input:checked + .twitter-heart3{
      transition: 1s steps(28);
      background-position: -2800px 0;
    }
  </style>
</head>

<body>
  <div class="twitter-heart1"></div>
  <div class="twitter-heart2">
    <img src="1_MTZW1G1mE7LSX1CnhTYeHA.png" alt="">
  </div>
  <input type="checkbox" style="zoom :2" id="cb1">
  <label class=" twitter-heart3" for="cb1"></label>
</body>
<script src="https://cdn.jsdelivr.net/npm/less"></script>

</html>

animation（动画）

transition必须和页面进行交互才可以，但是animation可以一直动并且不需要鼠标交互，更加灵活，更加精细的控制(可以添加若干个状态，即关键帧)
transition只能定义开始状态和结束状态，不能定义中间状态

keyframes

这个叫做关键帧，可以设置若干个状态点

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    * {
      background-color: rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 0 1px red;
    }

    @keyframes a {
      /*
    0%等价于from
    100%等价于to
  */

      0% {
        width: 50px;
      }

      20% {
        width: 100px;
      }

      80% {
        width: 60px;
      }

      100% {
        width: 180px;
      }
    }

    @keyframes color-change {
      0% {
        background-color: red;
      }

      18% {
        background-color: orange;
      }

      36% {
        background-color: yellow;
      }

      54% {
        background-color: green;
      }

      72% {
        background-color: aqua;
      }

      85% {
        background-color: blue;
      }

      100% {
        background-color: purple;
      }
    }

    div {
      height: 200px;
      animation-name: a, color-change;
      animation-duration: 5s, 8s;
      animation-timing-function: ease, linear;
      animation-delay: 3s, 0s;
      /*重复播放的次数，值有infinite，无穷的意思*/
      animation-iteration-count: infinite, infinite;
      /*值有normal：正序播放，reverse：反向播放，alternate:正反正反。。，alternate-reverse：反正反正。。*/
      animation-direction: alternate, normal;
      /*none,backwards:在开始动画之前就执行0%,forwards：在结束动画之后维持100%的位置,both结合backwards和forwards*/
      animation-fill-mode: both;
    }

    /*animation:a 5s ease 3s infinite alternate both,
color-change 8s linear infinite;*/
    div:hover {
      /*默认值是running，还有pause*/
      animation-play-state: paused;
    }

  </style>
</head>

<body>
  <div>
  </div>
</body>

</html>

animation-name

在元素中使用，指定用哪个animation

animation-duration

这个和transition一样，设定几秒

animation-timing-function

这个和transition一样，两个帧之间。

animation-delay

这个和transition一样

animation-iteration-count

这个是循环迭代，设置循环多少次，如果想要永远循环，infinite关键字即可实现，默认是1次

animation-direction

值有normal（一直都正着播），alternate（正的播一次，反着播一次），reverse（总是倒着播），alternate-reverse（倒着播一次，正着播一次）

animation-play-state

值有running，pause，可以结合hover之类的

animation-fill-mode

值有backwards（开始就在0%的位置），forwards（播完之后停在结束的位置），both（结合backwards和forwards）

例子

轮播图

进场transition，离场animation

<!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>Document</title>
  <style type="text/less">
    *{
      background-color: rgba(0,0,0,0.08);
      box-shadow:inset  0 0 1px red;
    }
    @keyframes leave-stage {
      from{
        left: 0%;
      }

     to{
       left:100%;
     }
    }
    .slider{
      width: 300px;
      height: 200px;
      position:relative;
      margin: auto;
      input{
        display:none;
      }
      input:nth-child(1):checked ~ .imgs img:nth-child(1),
      input:nth-child(2):checked ~ .imgs img:nth-child(2),
      input:nth-child(3):checked ~ .imgs img:nth-child(3),
      input:nth-child(4):checked ~ .imgs img:nth-child(4){
        left:0;
        z-index: 10;
        animation:none;
      }
      input:nth-child(1):checked ~ .indicators label:nth-child(1),
      input:nth-child(2):checked ~ .indicators label:nth-child(2),
      input:nth-child(3):checked ~ .indicators label:nth-child(3),
      input:nth-child(4):checked ~ .indicators label:nth-child(4){
        background-color: #ddd;
      }
      .imgs{
        width: 100%;
        height: 100%;
        position:relative;
        overflow : hidden;
        img{
          width: 100%;
          height: 100%;
          position:absolute;
          left:-100%;
          transition:1s;
          animation:leave-stage 1s;
        }
      }
      .indicators{
        position:absolute;
        bottom:0;
        left:0;
        display:flex;
        z-index:20;
        label{
          width: 10px;
          height: 10px;
          margin: 5px;
          background-color: black;
          cursor:pointer;
        }
      }
    }
  </style>
</head>

<body>
  <div class="slider">
    <input type="radio" name="slider1" id="slider1-1" checked>
    <input type="radio" name="slider1" id="slider1-2">
    <input type="radio" name="slider1" id="slider1-3">
    <input type="radio" name="slider1" id="slider1-4">

    <div class="imgs">
      <img
        src="https://travel.12306.cn/imgs/resources/uploadfiles/images/243945e6-c45d-4870-9cf5-77e488068646_product_W572_H370.jpg"
        alt="">
      <img
        src="https://travel.12306.cn/imgs/resources/uploadfiles/images/fcd7173f-7651-46e7-a126-bdc199e1f6f7_product_W572_H370.jpg"
        alt="">
      <img
        src="https://travel.12306.cn/imgs/resources/uploadfiles/images/b0c76b21-531b-4af4-a607-cf5672c72ded_product_W572_H370.jpg"
        alt="">
      <img
        src="https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg"
        alt="">
    </div>

    <div class="indicators">
      <label for="slider1-1"></label>
      <label for="slider1-2"></label>
      <label for="slider1-3"></label>
      <label for="slider1-4"></label>
    </div>
  </div>




</body>
<script src="https://cdn.jsdelivr.net/npm/less"></script>

</html>

四张片段轮播

<!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>Document</title>
  <style type="text/less">
    *{
      background-color: rgba(0,0,0,0.08);
      box-shadow:inset  0 0 1px red;
    }
    @keyframes leave-stage {
      from{
        left: 0%;
      }

     to{
       left:100%;
     }
    }
    .slider{
      width: 300px;
      height: 200px;
      position:relative;
      margin: auto;
      input{
        display:none;
      }
      input:nth-child(1):checked ~ .imgs span:nth-child(1),
      input:nth-child(2):checked ~ .imgs span:nth-child(2),
      input:nth-child(3):checked ~ .imgs span:nth-child(3),
      input:nth-child(4):checked ~ .imgs span:nth-child(4){
        left:0;
        z-index: 10;
        animation:none;
      }
      input:nth-child(1):checked ~ .indicators label:nth-child(1),
      input:nth-child(2):checked ~ .indicators label:nth-child(2),
      input:nth-child(3):checked ~ .indicators label:nth-child(3),
      input:nth-child(4):checked ~ .indicators label:nth-child(4){
        background-color: #ddd;
      }
      .imgs{
        width: 25%;
        height: 100%;
        position:relative;
        overflow : hidden;
        float:left;

        &:nth-of-type(1) span{
          /* 第一个div里的所有span显示每张图片的第一部分 */
          background-position: 0 0;
        }
        &:nth-of-type(2) span{
          background-position: -75px 0;
        }
        &:nth-of-type(3) span{
          background-position: -150px 0;
        }
        &:nth-of-type(4) span{
          background-position: -225px 0;
        }

        > span:nth-child(1){
          background-image: url(https://travel.12306.cn/imgs/resources/uploadfiles/images/243945e6-c45d-4870-9cf5-77e488068646_product_W572_H370.jpg);
        }
        > span:nth-child(2){
          background-image: url(https://travel.12306.cn/imgs/resources/uploadfiles/images/fcd7173f-7651-46e7-a126-bdc199e1f6f7_product_W572_H370.jpg);
        }
        > span:nth-child(3){
          background-image: url(https://travel.12306.cn/imgs/resources/uploadfiles/images/b0c76b21-531b-4af4-a607-cf5672c72ded_product_W572_H370.jpg);
        }
        > span:nth-child(4){
          background-image: url(https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg);
        }

        span{
          width: 100%;
          height: 100%;
          position:absolute;
          background-size: 300px 100%;
          left:-100%;
          transition:1s;
          animation:leave-stage 1s;
        }
      }
      .indicators{
        position:absolute;
        bottom:0;
        left:0;
        display:flex;
        z-index:20;
        width: 100%;
        justify-content: space-around;
        label{
          width: 10px;
          height: 10px;
          margin: 5px;
          background-color: black;
          cursor:pointer;
          border-radius: 9999px;
        }
      }
    }
  </style>
</head>

<body>
  <div class="slider">
    <input type="radio" name="slider1" id="slider1-1" checked>
    <input type="radio" name="slider1" id="slider1-2">
    <input type="radio" name="slider1" id="slider1-3">
    <input type="radio" name="slider1" id="slider1-4">
    <div class="imgs">
      <span></span><span></span><span></span><span></span>
    </div>
    <div class="imgs">
      <span></span><span></span><span></span><span></span>
    </div>
    <div class="imgs">
      <span></span><span></span><span></span><span></span>
    </div>
    <div class="imgs">
      <span></span><span></span><span></span><span></span>
      <!-- <img
        src="https://travel.12306.cn/imgs/resources/uploadfiles/images/243945e6-c45d-4870-9cf5-77e488068646_product_W572_H370.jpg"
        alt="">
      <img
        src="https://travel.12306.cn/imgs/resources/uploadfiles/images/fcd7173f-7651-46e7-a126-bdc199e1f6f7_product_W572_H370.jpg"
        alt="">
      <img
        src="https://travel.12306.cn/imgs/resources/uploadfiles/images/b0c76b21-531b-4af4-a607-cf5672c72ded_product_W572_H370.jpg"
        alt="">
      <img
        src="https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg"
        alt=""> -->
    </div>

    <div class="indicators">
      <label for="slider1-1"></label>
      <label for="slider1-2"></label>
      <label for="slider1-3"></label>
      <label for="slider1-4"></label>
    </div>
  </div>




</body>
<script src="https://cdn.jsdelivr.net/npm/less"></script>

</html>