HTML&CSS(11)---CSS(07)过渡&动画

 
  • 0 views

Unit Two: HTML&CSS(11)—CSS(07) 过渡&动画

1. 过渡<transition>

  • 通过过渡可以指定一个属性发生变化时的切换方式。

    • 目的：动画转场效果，提供用户体验。

  • 属性值：

    • 过渡属性：<transition-property：element>

      • 指定要过渡的属性。
      • 多个属性使用,隔开。
      • 所有属性都需要过渡，使用:all。
      • 大部分属性都支持过渡效果。注意过渡时，必须从一个有效值到另一个有效值。

    • 过渡持续时间：<transition-duration:time>

      • 时间单位： s 和 ms。
        • 1s = 1000ms

    • 过渡运动效果：<transition-timing-function:time>

      • 可选值：
        • <:ease>淡入淡出
        • <:ease-out>淡出加强
        • <:ease-in> 淡入加强
        • <:ease-in-out>淡入淡出加强
        • <linear>匀速
        • <:cubic-bezier()>贝塞尔曲线
        • <steps()，start/end> 分步过渡
          • start每步开始时启动
          • end每步结束时启动

    • 过渡延迟时间<transition-duration:time>

      • 等待相应时间执行过渡。

  • 简写属性：

    • <transition>可以可以同时设置过渡相关的所有属性。
      • 第一个时间为持续时间。
      • 第二个时间为延迟时间。

  • 米兔过渡练习

    <!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 132px;
            height: 271px;
            background-image: url(./动画/bigtap-mitu-queue-big.png);
            margin: 0px auto;
            background-position: 0 0;
            transition: all 1s steps(4);
        }
  
        .box1:hover {
            background-position: -528px;
        }
  
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
            clear: both;
        }
  
  
  
        .box1:hover .box3 {
            margin-left: 900px;
        }
    </style>
</head>
  
<body>
    <div class="box1 clearfix">
    </div>
</body>
  
</html>

2. 动画<animation>

  • 动画和过渡类似，可以实现一些动态效果。

  • 过渡需要某个属性发生变化才能触发。动画可以自动触发和循环。

  • @keyframes动画设置步骤：

            @keyframes test {
            /* 动画开始位置 */
            from {
                margin-left: 0%;
            }
            /* 动画结束位置 */
            to {
                margin-right: 100%;
            }
        }

  • 动画属性

    • <animation-name:keyframes>

    • <animation-duration:time>

    • <animation-timing-function:ease>

    • <animation-delay:time>

    • 动画执行次数:<animation-iteration-count:nth/infinite>

    • 动画方向：<animation-direction:normal;reverse;alternative;alternative-reverse>

      • <:normal>:默认值， 从from到to。
      • <:reverse>：从to到from。
      • <:alternative>: 从from向to运行， 重复执行时反向。
      • <:alternative-reverse>:从to向from运行， 重复执行时反向。

    • 动画执行状态：<animation-play-state: running;pause;>

      • 设置鼠标移入时动画运行状态。

    • 动画结束模式：<animation-fill-mode:none；forwards;backwards;>

      • 可选值：
        • <:none>动画结束后回到默认位置。
        • <:forwards>动画结束后停在结束位置。
        • <:backwards> 动画延时等待时，就会处于开始位置。
        • <:both>结合了forwards和backwards两个的特点。

    • 练习1：奔跑的少年

      <!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .run {
            width: 256px;
            height: 256px;
            background-image: url(./动画/bg2.png);
            margin: 0 auto;
            animation: test 1s steps(5) 2s infinite normal;
        }
    
        /* 创建关键帧 */
        @keyframes test {
            from {
                background-position-x: 0%;
            }
    
            to {
                background-position-x: 100%;
            }
        }
    </style>
</head>
    
<body>
    <div class="run"></div>
</body>
    
</html>

    • 练习2：小球落下

      <!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            height: 500px;
            border-bottom: solid 10px saddlebrown;
            margin: 50px auto;
            /* 外边距重叠，开启bfc */
            overflow: hidden;
        }
    
        .box {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: aqua;
            animation: ball 2s 2s 1 ease-in both;
        }
    
        @keyframes ball {
            from {
                animation-delay: 2s;
                margin-top: 0px;
            }
    
            15% {
                margin-top: 400px;
                animation: 2s 0s cubic-bezier(.05, 1.05, .57, .94);
            }
    
            30% {
                margin-top: 100px;
                animation: 1.5s 0s cubic-bezier(.74, .07, .93, .73);
            }
    
            50% {
                margin-top: 400px;
                animation: 1.0s 0s cubic-bezier(.05, 1.05, .57, .94);
            }
    
    
            75% {
                margin-top: 250px;
                animation: 0.5s 0s cubic-bezier(.74, .07, .93, .73);
            }
    
            85% {
                margin-top: 400px;
                animation: 0.3s 0s cubic-bezier(.05, 1.05, .57, .94);
            }
    
    
            95% {
                margin-top: 350px;
                animation: 0.1s 0s cubic-bezier(.74, .07, .93, .73);
            }
    
            to {
                margin-top: 400px;
                /* animation: 0.1s 0s ease-in; */
            }
    
    
        }
    </style>
</head>
    
<body>
    <div class="outer">
        <div class="box"></div>
    </div>
</body>
    
</html>