前端——css动画

一、动画

1.定义动画

@keyframes +自定义动画名字

0%-100% 就是动画的开始到结束帧数 ——from to

@keyframes mybox {

        0% {

            width: 600px;

        }

        20% {

            width: 50px;

        }

        30% {

            width: 300px;

        }

        100% {

            width: 1000px;

        }

    }

或者

@keyframes mybox {

        from {

            width: 600px;

        }

        20% {

            width: 50px;

        }

        30% {

            width: 300px;

        }

        to {

            width: 1000px;

        }

    }

2.调用动画

animation: name duration timing-function iteration-count;

1.整合

animation: mybox 30s;

2.分解属性

       /*  animation-name:动画的名称 */

        animation-name: mybox;

        /* animation-duration 动画所需要时间 */

        animation-duration: 8s;

        /* 动画运动速率和我们的过渡的运动速率取值是一样的 */

        /* ease 缓慢开始，陡然加速，再逐渐减速至结束

        ease—in  缓慢开始，再逐渐加速至结束，最终突然停止

        ease—out  缓慢开始，再逐渐减速至结束

        ease—i-out  缓慢开始，然后加速，再减速至结束*/

        animation-timing-function: ease-in-out;

        /* 动画延迟 */

        animation-delay: 5s;

        /* 规定的动画播放次数  infinite为无限次播放*/

        animation-iteration-count: 2;

        /* 当想保留动画完成后最后一帧的状态 */

        /* animation-fill-mode: forwards; */

        /*  backwards在动画显示之前的状态，就跟我们的延迟播放的效果一样*/

        /* animation-fill-mode: backwards; */

        animation-fill-mode: both;

二、动画属性

1.transition

常见：

        ease 缓慢开始，陡然加速，再逐渐减速至结束(默认）

        ease—in  缓慢开始，再逐渐加速至结束，最终突然停止

        ease—out  缓慢开始，再逐渐减速至结束

        ease—i-out  缓慢开始，然后加速，再减速至结束

        linear 匀速

.ease:hover {}表示实现鼠标交互效果

<!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>
        /* ease 缓慢开始，陡然加速，再逐渐减速至结束
            ease—in  缓慢开始，再逐渐加速至结束，最终突然停止
            ease—out  缓慢开始，再逐渐减速至结束
            ease—i-out  缓慢开始，然后加速，再减速至结束
            linear 匀速*/
        .ease {
            width: 200px;
            height: 20px;
            margin-bottom: 20px;
            background-color: aqua;
            /* transition: width 2s ease; */
            /* 所有属性都过渡 */
            transition: all 2s linear;
            position: absolute;
            left: 0;
        }
        .ease-in {
            width: 200px;
            height: 20px;
            margin-bottom: 20px;
            background-color: red;
            transition: width 2s ease-in;
        }
        .ease-out {
            width: 200px;
            height: 20px;
            margin-bottom: 20px;
            background-color: orange;
            transition: width 2s ease-out;
        }
        .ease-in-out {
            width: 200px;
            height: 20px;
            margin-bottom: 20px;
            background-color: pink;
            transition: width 2s ease-in-out;
        }
        .ease:hover {
            /* width: 600px; */
            left: 200px;
        }
        .ease-in:hover {
            width: 600px;
        }
        .ease-out:hover {
            width: 600px;
        }
        .ease-in-out:hover {
            width: 600px;
        }
    </style>
</head>
<body>
    <div class="ease"></div>
    <div class="ease-in"></div>
    <div class="ease-out"></div>
    <div class="ease-in-out"></div>
</html>

2.transform

1.移动——translate

.box {

        width: 80px;

        height: 80px;

        background-color: pink;

        /* 黑一个过渡，方便观察 */

        transition: 3s;

        /* translate 移动 */

        /* translateX 沿着X移动 */

        /* transform: translateX(300px); */

        /* translateY 沿着Y移动 */

    }

    .box:hover {

        /* translate 两个值斜对角移动 */

        /* 只有一个值的时候是以X轴 */

        transform: translate(300px,300px);

        /* translateX 沿着X移动 */

        /* transform: translateX(300px); */

        /* translateY 沿着Y移动 */

    }

2.旋转——rotate

.box {

        width: 80px;

        height: 80px;

        background-color: pink;

        /* 黑一个过渡，方便观察 */

        transition: 3s;

        /* 将盒子移动到浏览器中间 */

        margin: 50px auto;

        /* translate 移动 */

        /* translateX 沿着X移动 */

        /* transform: translateX(300px); */

        /* translateY 沿着Y移动 */

    }

    /* 旋转 */

    .box:hover {

        /* 当写代码时要角度的时候角度单位是deg */

        /* transform: rotate(45deg); */

        /* 正值 顺时针，负值 逆时针 */

        transform: rotate(-45deg);

        /* transform: rotateX(45deg); */

    }

3.旋转中心——transform-origin

.box {

        width: 150px;

        height: 150px;

        background-color: skyblue;

        /* 将盒子移动到浏览器中间 */

        margin: 300px auto;

        transform: rotate(45deg);

        /* 旋转中心我们可以理解为变化原点 规定写在盒子属性中，而非交互效果中*/

        /* transform-origin: -100% -100%; */

        /* 或者 */

        transform-origin: top left;

    }

4.缩放——scale

.box:hover {

        /* 缩放会依据盒子的宽高来进行缩放 */

        /* 1，1 原来的宽高 */

        /* 当你写一个值的时候同时放大你的宽高 */

        /* 当值为负数，则会反向缩放 */

        /* transform: scale(2,2); */

        /* transform: scale(-2); */

        /* 缩小是0-1 */

        transform: scale(-0.5);

    }

5.倾斜——skew

/* 倾斜 */

       transform: skew(30deg);

       transform: skew(30deg,10deg);

6.3d模式呈现

      transform-style: preserve-3d;

注意给到父元素

<!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>
        body {
            /* perspective 视距 */
            /* 设置人和物体的距离——视距，规定要给到父元素 */
            perspective: 3000px;
            /* transform-style: preserve-3d; */
        }
        .box {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            /* 将盒子移动到浏览器中间 */
            margin: 100px auto;
           transition: 3s;
           /* 3d的呈现 规定给到父元素 */
           transform-style: preserve-3d;

        }
        .son {
            width: 300px;
            height: 300px;
            background-color: red;
            /* 将盒子移动到浏览器中间 */
            margin: 100px auto;
           transition: 3s;

        }
        .box:hover {
            transform: rotateY(45deg);
        }
        .son:hover {
            transform: rotateX(45deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>
</html>

三、整合案例

示例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>
        body {
            /* 100vw和100vh确保body元素的尺寸与浏览器窗口的尺寸完全一致，没有超出也没有不足。 */
            width: 100vw;
            height: 100vh;
            background-color:black;
            display:flex;
            justify-content: center;
            align-items: center;
        }

        main {
            width: 400px;
            height: 400px;
            border: solid 1px white;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: orangered;
            animation-name: hd,hd1,hd2;
            animation-duration: 4s,3s,4s;
        }
        @keyframes hd {
           25% {
            transform: translateX(300px);
           }
           50% {
            transform: translate(300px,300px);
           }
           75% {
            transform: translateY(300px);
           }
        }
        @keyframes hd1 {
           25% {
            background-color: orangered;
           }
           50% {
           background-color: blue;
           }
           75% {
            background-color: blueviolet;
           }
        }
        @keyframes hd2 {
            from,to {
                background-color: gray;
            }
           25% {
            border-radius: 50%;
           }
           50% {
            border-radius: 0%;
           }
           75% {
            border-radius: 50%;
           }
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</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>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            /* 100vw和100vh确保body元素的尺寸与浏览器窗口的尺寸完全一致，没有超出也没有不足。 */
            background-color: #2c3e50;
        }

        main {
            width: 100vw;
            height: 100vh;
            background-color:#34495e;
            transform: scale(0);
            animation-name: hd,hd1,hd2;
            animation-duration: 2s,4s,1s;
            animation-fill-mode: forwards;
            display: flex;
            justify-content: center;
            align-items: center;
            
        }
        main::after {
            content: 'houdunren.com';
            font-size: 2em;
            color: white;
            opacity: 0;
            animation-name: opacity;
            animation-duration: 2s;
            animation-delay: 4s;
            animation-fill-mode: forwards;

        }
        @keyframes opacity {
            to {
                opacity: .8;
            }
            
        }
        @keyframes hd {
           25% {
            transform: scale(0.5);
           }
           50% {
            transform: scale(1) rotate(360deg);
           }
           75% {
            transform: scale(0.5);
           }
           to {
            transform: scale(0);
           }
        }
        @keyframes hd1 {
           25% {
            background-color: orangered;
           }
           50% {
           background-color: blue;
           }
           75% {
            background-color: blueviolet;
           }
           to {
            background-color: greenyellow;
           }
        }
        @keyframes hd2 {
           25% {
            border-radius: 50%;
           }
           50% {
            border-radius: 0%;
           }
           75% {
            border-radius: 50%;
           }
           /* to {
            border-radius: 0%;
           } */
        }
        section {
            width: 100vw;
            height: 100vh;
            background-color:red;
        }
    </style>
</head>
<body>
    <main></main>
</body>
</html>

标签： css 前端

本文转载自: https://blog.csdn.net/qq_53256193/article/details/142621199
版权归原作者 人生の三重奏 所有，如有侵权，请联系我们删除。

前端——css动画

一、动画

1.定义动画

2.调用动画

二、动画属性

1.transition

2.transform

1.移动——translate

2.旋转——rotate

3.旋转中心——transform-origin

4.缩放——scale

5.倾斜——skew

6.3d模式呈现

三、整合案例

发表评论

“前端——css动画”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航