CSS3 过渡和动画

最新推荐文章于 2022-07-21 17:25:34 发布

苦涩2020

最新推荐文章于 2022-07-21 17:25:34 发布

阅读量274

点赞数

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

本文链接：https://blog.csdn.net/UserPython/article/details/106437940

版权

前端同时被 2 个专栏收录

80 篇文章 1 订阅

订阅专栏

CSS3

20 篇文章 0 订阅

订阅专栏

本文介绍了CSS3的过渡和动画特性。过渡是元素在样式变换时添加的效果，需要触发事件来实现，包括属性名、时长、定时函数和延迟等四大要素。而动画则可以创建多个关键帧并无需事件触发，支持无限次播放和轮流反向播放。通过语法示例，阐述了如何绑定和控制动画的播放与暂停。

摘要由CSDN通过智能技术生成

过渡初识

过渡：元素从一种样式变换为另一种样式时为元素添加的效果
必须要触发一个事件才能实现过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: red;
            margin: 50px auto;
            transition: width 2s;
        }
        .box:hover{
            width: 500px; background: orange;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

过渡四大要素

transition-property：要控制css的属性名；默认值：all (所有属性都将获得过渡效果)；不是必需
transition-duration：完成过渡需要的时间；默认是0，单位是秒或毫秒，1000ms=1s；必需
transition-timing-function：定义过渡效果的时间曲线；不是必需
ease：默认值；规定慢速开始，然后变快，再慢速结束
linear：均速；规定以相同速度开始至结束
ease-in：规定以慢速开始
ease-out：规定以慢速结束
ease-in-out：规定以慢速开始和结束
cubic-bezier(n, n, n, n)：在cubic-bezier函数中自定义值；可能的值是0至1之间的数值
transition-delay：定义过渡的延迟开始时间，默认是0，单位是秒或毫秒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: red;
            margin: 50px auto;
            /* 要控制的css属性名 */
            transition-property: width, height, background;
            /* 完成过渡需要的时间 */
            transition-duration: 2s;
            /* 过渡的速度曲线 */
            /* transition-timing-function: linear;            transition-timing-function: linear;
            transition-timing-function: ease;
            transition-timing-function: ease-in;
            transition-timing-function: ease-out;
            transition-timing-function: ease-in-out; */

            /* 过渡的延迟开始时间 */
            transition-delay: 1s, 2s, 3s;

        }
        .box:hover{
            width: 500px; height: 200px;
            background: orange;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

过渡简写

方式一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: red;
            margin: 50px auto;
            /* 方式一 */
            transition: all 2s linear 1s;
            transition: 2s linear 1s;
            transition: 2s 1s;
            transition: 2s;
        }
        .box:hover{
            width: 500px; height: 200px;
            background: orange;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

方式二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: red;
            margin: 50px auto;
            /* 方式二 */
            transition:width 2s linear 1s, 
                       height 3s ease 2s,
                       background 4s ease 3s;

        }
        .box:hover{
            width: 500px; height: 200px;
            background: orange;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

创建一个动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: red;
            margin: 100px auto;
            /* 绑定动画 */
            animation: Big 5s;
        }

        /* @keyframes name: 用于创建一个动画，动画名称自定义 */
        @keyframes Big{
            /* 动画开始元素样式 */
            form{
                width: 100px; height: 100px; background: red;
            }
            /* 动画结束元素样式 */
            to{
                width: 200px; height: 200px; background: orange;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

百分比创建动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: red;
            margin: 10px auto;
            /* 绑定动画 */
            animation: Big 5s;
        }

        /* @keyframes name: 用于创建一个动画，动画名称自定义 */
        @keyframes Big{
           /* 百分比创建动画 */
           /* 百分比指的是动画完成时间的百分比 */
           0%{width: 100px; height: 100px; background: red;}
           50%{width: 150px; height: 170px; background: orangered;}
           100%{width: 200px; height: 200px; background: pink;}

        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

动画绑定与设置

动画绑定语法：animation: 要绑定的动画名称动画完成时间速度曲线延迟开始时间播放次数轮流反向播放保持最后的状态

与过渡语法相似
播放次数：默认为1次；infinite：无限次数播放
轮流反向播放：默认值为normal，轮流反向播放alternate，必须要有播放次数
保持最后的状态：forwards

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: red;
            margin: 10px auto;
            /* 绑定动画 */
            /* animation: Big 2s 2; */
            /* animation: Big 2s infinite; */
            /* animation: Big 2s 2 alternate; */
            animation: Big 2s forwards;
        }

        /* @keyframes name: 用于创建一个动画，动画名称自定义 */
        @keyframes Big{
           /* 百分比创建动画 */
           /* 百分比指的是动画完成时间的百分比 */
           0%{width: 100px; height: 100px; background: red;}
           50%{width: 150px; height: 170px; background: yellow;}
           100%{width: 200px; height: 200px; background: pink;}
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

动画播放和暂停

语法：animation-play-state: running | paused

规定动画播放running还是暂停paused；默认为running

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: red;
            margin: 10px auto;
            animation: Big 5s;
            animation-play-state: paused;
        }
        .box:hover{
            animation-play-state: running;
        }

        @keyframes Big{
           0%{width: 100px; height: 100px; background: red;}
           50%{width: 150px; height: 170px; background: yellow;}
           100%{width: 200px; height: 200px; background: pink;}
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>