css3transition过渡效果-cyy

2020-11-12
1116

css3过渡使用场景分析：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:400px;
        }
        div{
            width:200px;
            height:200px;
            background-color: cornflowerblue;
            transition:1s;
        }
        div:hover {
            border-radius:50%;
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

属性中间值对过渡的影响：

没有中间值的属性无法实现过渡动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <tit北京网站建设等相关服务请咨询律品科技客服le>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:400px;
        }
        div{
            width:200px;
            height:200px;
            background-color: cornflowerblue;
            transition:1s;
            border:10px solid pink;
        }
        div:hover {
            border-radius:50%;
            width:400px;
            height:400px;
            border:20px dotted lightblue;
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

定制css过渡效果属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:400px;
        }
        div{
            width:200px;
            height:200px;
            background-color: cornflowerblue;
            border:10px solid white;
            /* 过渡属性 */
            transition-property:background,width,height,border-radius;
            transition-property:all;
            /* 过渡持续时间 */
            transition-duration:2s;
            margin-bottom:50px;
        }
        main:hover div{
            background-color: pink;
            border-radius:50%;
            width:400px;
            height:400px;
        }
        div:nth-child(1){
            transition-property:all;
        }
        div:nth-child(2){
            transition-property:none;
        }
    </style>
</head>
<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
</html>

transitionend动画API接口：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:400px;
        }
        div{
            width:200px;
            height:200px;
            position:relative;
        }
        div::before{
            position:absolute;
            width:200px;
            height:200px;
            background-color: cornflowerblue;
            border-radius:10%;
            content:'cyy';
            display:flex;
            justify-content: center;
            align-items: center;
            color:white;
            font-size:2em;
            transition:2s;
            cursor:pointer;
        }
        div:hover::before{
            transform:rotate(360deg);
        }
        div::after{
            position:absolute;
            width:200px;
            bottom:-55px;
            content:'cyy is cute~';
            color:white;
            font-size:1.2em;
            text-align:center;
            transition:2s;
            cursor:pointer;
            transform:translateX(-999px);
        }
        div.move::after{
            transform:translateX(0);
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>

    <script>
        document.querySelector('div').addEventListener('transitionend',function(e){
            console.log(e)
            document.querySelector('div').className = 'move';
        })
    </script>
</body>
</html>

transition-duration 过渡时间使用技巧：

过渡时间与过渡属性一一配对，当过渡时间数量少于过渡属性时，会循环回到最初的过渡时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:400px;
        }
        div{
            width:200px;
            height:200px;
            background-color: cornflowerblue;
            transition-property:background,width,height;
            /* 过渡属性height会选择过渡时间1s */
            transition-duration:1s,2s;
        }
        div:hover {
            width:400px;
            height:400px;
            background-color: pink;
            border-radius:50%;
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

不同状态过渡时间效果控制：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:400px;
        }
        div{
            width:200px;
            height:200px;
            background-color: cornflowerblue;
            transition-property:background,width,height;
            /* 过渡属性height会选择过渡时间1s */
            transition-duration:1s,2s;
        }
        div:hover {
            width:400px;
            height:400px;
            background-color: pink;
            border-radius:50%;
            transition-property:background;
            /* 过渡属性height会选择过渡时间1s */
            transition-duration:1s;
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

transition-timing-function 控制运行轨迹：

贝塞尔曲线工具网：https://cubic-bezier.com/#.11,.75,.92,.57

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:400px;
        }
        div{
            width:200px;
            height:200px;
            background-color: cornflowerblue;
            transition-duration:3s;
            transition-timing-function:cubic-bezier(.15,.79,.72,-0.09);
        }
        div:hover {
            width:400px;
            height:400px;
            background-color: pink;
            border-radius:50%;
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

steps步进帧动画控制效果：

steps() 设置间隔参数，可以实现分步过渡

第一个参数指定了时间函数中的间隔数量（必须是正整数）
第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:400px;
        }
        div{
            width:200px;
            height:200px;
            background-color: cornflowerblue;
            transition-duration:1s;
            
            transition-timing-function:steps(3,end);
            transition-timing-function:steps(1,end);
            transition-timing-function:steps(1,start);
            transition-timing-function:step-start;
            transition-timing-function:step-end;
            transition-timing-function:steps(3,start);
        }
 常德网站建设等相关服务请咨询律品科技客服       div:hover {
            width:400px;
            height:400px;
            background-color: pink;
            border-radius:50%;
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

使用steps步进过渡制作时钟：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:400px;
            background:white;
            border-radius:50%;
            position:relative;
        }
        main::before{
            content:'';
            width:20px;
            height:20px;
            background-color: black;
            border-radius:50%;
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
        }
        main::after{
            content:'';
            width:2px;
            height:50%;
            background-color: black;
            border-radius:50%;
            position:absolute;
            left:50%;
            top:0;
            transform:translateX(-50%);
            transition:60s;
            transform-origin:bottom;
            transition-timing-function:steps(60,start);
        }
        main:hover::after{
            transform:translateX(-50%) rotate(360deg);
        }
    </style>
</head>
<body>
    <main>
        
    </main>
</body>
</html>

step-end与step-start使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        ul{
            width:400px;
            height:300px;
            display:flex;
            position:relative;
            list-style:none;
        }
        li{
            flex:1;
            border:1px solid #ddd;
            text-align:center;
        }
        ul::before{
            content:'start';
            width:200px;
            height:100px;
            background:orange;
            position:absolute;
            top:0;
            left:0;
            transition-duration:1s;
            font-size:2em;
            color:white;
            transition-timing-function:step-start;
            z-index:2;
        }
        ul::after{
            content:'end';
            width:200px;
            height:100px;
            background:purple;
            position:absolute;
            bottom:0;
            left:0;
            transition-duration:1s;
            font-size:2em;
            color:white;
            transition-timing-function:step-end;
            z-index:2;
        }
        ul:hover::before,ul:hover::after{
            transform:translateX(200px);
        }

    </style>
</head>
<body>
    <main>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </main>
</body>
</html>

纯css图片切换效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:200px;
            overflow:hidden;
        }
        main:hover section{
            transform:translateX(-50%);
        }
        section{
            width:800px;
            height:200px;
            display:flex;
            transition:1s;
            transition-timing-function:step-start;
        }
        div{
            width:400px;
            height:200px;
            overflow:hidden;
        }
        img{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
    <main>
        <section>
            <div><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2329224269,1458878414&fm=26&gp=0.jpg" alt=""></div>
            <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605093891148&di=5a12000e61c98e16a488d9570ce09b4d&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D4042660312%2C2429876079%26fm%3D214%26gp%3D0.jpg" alt=""></div>
        </section>
    </main>
</body>
</html>

transition-delay 延迟过渡使用：

多用于下拉导航显示，鼠标移入一定时间后再显示；鼠标移入立刻移出则不显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:200px;
            overflow:hidden;
        }
        main:hover section{
            transform:translateX(-50%);
        }
        section{
            width:800px;
            height:200px;
            display:flex;
            transition:1s;
            transition-delay:1s;
        }
        div{
            width:400px;
            height:200px;
            overflow:hidden;
        }
        img{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
    <main>
        <section>
            <div><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2329224269,1458878414&fm=26&gp=0.jpg" alt=""></div>
            <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605093891148&di=5a12000e61c98e16a488d9570ce09b4d&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D4042660312%2C2429876079%26fm%3D214%26gp%3D0.jpg" alt=""></div>
        </section>
    </main>
</body>
</html>

transition 组合设置全部过渡规则：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        div{
            width:200px;
            height:200px;
            background:lightblue;

            transition:border-radius linear 1s,background ease 1s 1s;
        }
        body:hover div{
            border-radius:50%;
            background:pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

红心点赞案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #f3f3f3;
        }
        main{
            width:50px;
            height:50px;
            position:relative;
            border:1px solid #ddd;
        }
        i.fa{
            font-size:50px;
            color:#95a5a6;
            position:absolute;
            transition:1s;
        }
        main.heart i.fa{
            transform:scale(3);
            color:crimson;
            opacity:0;
        }
        main.heart i.fa:nth-child(1){
            transform:scale(1);
            opacity:1;
        }
    </style>
</head>
<body>
    <main onclick="heart()">
        <i class="fa fa-heart" aria-hidden="true"></i>
        <i class="fa fa-heart" aria-hidden="true"></i>
    </main>

    <script>
        function heart(){
            $('main').toggleClass('heart');
        }
    </script>
</body>
</html>