手把手教你寫css3通用動畫

時間  2019-11-19
標籤 手把手 css3 css 通用 動畫 欄目 CSS 简体版
原文   原文鏈接

以前接了幾個微信裏的項目，相似電子邀請函，什麼分析報告這樣的項目， 對css3動畫要求十分高，每一個頁面客戶幾乎都有天馬行空的想法，或者說設計師有這樣的想法。
衆所周知css3裏的keyframe寫好了就不能賦值複用的，  因此怎樣能把keyframe通用起來就異常關鍵了。
好，下面先上幾個以前寫的項目：（今天sae掛了 ，只好用別人的生產地址），手機打開或者chrome模擬看哦！
http://www.51qianlima.cn/bim/css

http://wx.mgcc.com.cn/fotile/invite/index.html?leader=2&from=timeline&isappinstalled=0html

 

仔細看你就發現頁面的動畫有漸顯，有飛入，並且可能2者或多者同時存在。css3

那麼問題來了：是否是每一個頁面的keyframe都得單獨寫？

在說這個問題以前，你可能得掌握幾種經常使用的水平居中，垂直居中，中心居中；水平偏移，垂直偏移的寫法（如下demo效果請chrome模擬手機端打開，-webkit內核哦）。web

demo1：postion結合margin:auto chrome

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title></title>
    <style>
        * {
            padding:0;
            margin:0;
        }
        html,body {
            height:100%;
        }
        .demo {
            width:100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background:lightblue;
        }
        .demo-1 {
            position: absolute;
            margin:0 auto;
            left:0;
            right:0;
        }
        .demo-2 {
            position: absolute;
            margin:auto 0;
            top:0;
            bottom:0;
        }
        .demo-3 {
            position: absolute;
            margin:auto;
            top:0;
            bottom:0;
            left:0;
            right:0;
        }
    </style>
</head>
<body>
    <div class="demo demo-1">水平居中</div>
    <div class="demo demo-2">垂直居中</div>
    <div class="demo demo-3">中心居中</div>
</body>
</html>

 

demo2：postion和translate 一塊兒使用達到水平、垂直居中微信

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title></title>
    <style>
        * {
            padding:0;
            margin:0;
        }
        html,body {
            height:100%;
        }
        .demo {
            width:100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background:peachpuff;
        }
        .demo-1 {
            position: absolute;
            left:50%;
            -webkit-transform:translateX(-50%);
        }
        .demo-2 {
            position: absolute;
            top:50%;
            -webkit-transform:translateY(-50%);
        }
        .demo-3 {
            position: absolute;
            top:50%;
            left:50%;
            -webkit-transform:translateX(-50%) translateY(-50%);
        }
    </style>
</head>
<body>
<div class="demo demo-1">水平居中</div>
<div class="demo demo-2">垂直居中</div>
<div class="demo demo-3">中心居中</div>
</body>
</html>

 

好  掌握了以上2個demo的寫法和區別後，正在的項目上 ，每每用到的是根據水平中心點，或者垂直中心點偏移的寫法，由於手機屏幕大小不一，因此這個寫法異經常用。css3動畫

demo3：中心點偏移app

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title></title>
    <style>
        * {
            padding:0;
            margin:0;
        }
        html,body {
            height:100%;
        }
        .demo {
            width:100px;
            height: 100px;
            text-align: center;
            background:lightblue;
        }
        .demo-1 {
            position: absolute;
            margin: 0 auto;
            left: -88px;
            right: 0;
        }
        .demo-2 {
            position: absolute;
            margin: auto 0;
            top: -30px;
            bottom: 0;
        }

        body:before {
            content: '';
            width: 100%;
            border-bottom: 2px dotted blue;
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-2px);
        }

        body:after {
            content: '';
            height: 100%;
            border-left: 2px dotted blue;
            position: absolute;
            left: 50%;
            -webkit-transform: translateX(2px);
        }

    </style>
</head>
<body>

<div class="demo demo-1">水平 距離偏移</div>
<div class="demo demo-2">垂直 距離偏移</div>

</body>
</html>

 

行 掌握後接下來能夠爲寫通用動畫做鋪墊了（主要是飛入效果）
若是單純漸顯的話，我們只須要控制opacity 就能夠達到了：post

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title></title>
    <style>
        * {
            padding:0;
            margin:0;
        }
        html,body {
            height:100%;
        }
        .demo {
            width:100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background:lightblue;
            opacity: 0;
        }
        .demo-1 {
            position: absolute;
            margin:0 auto;
            left:0;
            right:0;
            -webkit-animation:.8s ease opacity_kf 0s forwards;
        }
        .demo-2 {
            position: absolute;
            margin:auto 0;
            top:0;
            bottom:0;
            -webkit-animation:.8s ease opacity_kf .8s forwards;
        }
        .demo-3 {
            position: absolute;
            margin:auto;
            top:0;
            bottom:0;
            left:0;
            right:0;
            -webkit-animation:.8s ease opacity_kf 1.6s forwards;
        }

        @-webkit-keyframes opacity_kf {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
         }
    </style>
</head>
<body>
<div class="demo demo-1">水平居中</div>
<div class="demo demo-2">垂直居中</div>
<div class="demo demo-3">中心居中</div>
</body>
</html>

扯了這麼多 ，主角來了，就是飛入也分2種寫法，一種就是每一個飛入效果是一個width:100%;height:100%;的層，而後操做是整個層translate，XY；可是這樣寫有一個很不方便就是審查元素的時候，放大鏡只能定位到一個層上（多個飛入動畫，別的層就給蓋住了）動畫

demo以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title></title>
    <style>
        * {
            padding:0;
            margin:0;
        }
        html,body {
            height:100%;
        }
        .demo {
            width:100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background:lightblue;
        }
        .demo-1 {
            position: absolute;
            margin:0 auto;
            left:0;
            right:0;
        }
        .demo-2 {
            position: absolute;
            margin:auto 0;
            top:0;
            bottom:0;

        }
        .demo-3 {
            position: absolute;
            margin:auto;
            top:0;
            bottom:0;
            left:0;
            right:0;
        }

        @-webkit-keyframes translate_kf {
            0% {
                -webkit-transform:translateX(100%);
            }
            100% {
                -webkit-transform:translateX(0);
            }
        }

        .demo-1-ani {
            -webkit-animation:.8s ease translate_kf 0s forwards;
        }
        .demo-2-ani {
            -webkit-animation:.8s ease translate_kf .8s forwards;
        }
        .demo-3-ani {
            -webkit-animation:.8s ease translate_kf 1.6s forwards;
        }

        .translate-wrap {
            width:100%;
            height:100%;
            -webkit-transform:translateX(100%);
            position:absolute;
        }
    </style>
</head>
<body>
    <div class="translate-wrap demo-1-ani">
        <div class="demo demo-1">水平居中</div>
    </div>
    <div class="translate-wrap demo-2-ani">
        <div class="demo demo-2">垂直居中</div>
    </div>
    <div class="translate-wrap demo-3-ani">
        <div class="demo demo-3">中心居中</div>
    </div>

</body>
</html>


可是若是換一個寫法，就是translate的包裹器裏面的節點top和left都寫了定值，那麼外面動畫的包裹器實際上是不佔文檔流的

而後咱們只須要操做這個不佔文檔流的容器就能夠了

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title></title>
    <style>
        * {
            padding:0;
            margin:0;
        }
        html,body {
            height:100%;
        }
        .demo {
            width:100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background:lightblue;
        }
        .demo-1 {
            position: absolute;
            left:0;
            right:0;
        }
        .demo-2 {
            position: absolute;
            top:150px;

        }
        .demo-3 {
            position: absolute;
            top:300px;
            left:100px;
        }

        @-webkit-keyframes translate_kf {
            0% {
                -webkit-transform:translateX(100%);
            }
            100% {
                -webkit-transform:translateX(0);
            }
        }

        .demo-1-ani {
            -webkit-animation:.8s ease translate_kf 0s forwards;
        }
        .demo-2-ani {
            -webkit-animation:.8s ease translate_kf .8s forwards;
        }
        .demo-3-ani {
            -webkit-animation:.8s ease translate_kf 1.6s forwards;
        }

        .translate-wrap {
            width:100%;
            -webkit-transform:translateX(100%);
            position:absolute;
        }
    </style>
</head>
<body>
    <div class="translate-wrap demo-1-ani">
        <div class="demo demo-1">水平居中</div>
    </div>
    <div class="translate-wrap demo-2-ani">
        <div class="demo demo-2">垂直居中</div>
    </div>
    <div class="translate-wrap demo-3-ani">
        <div class="demo demo-3">中心居中</div>
    </div>

</body>
</html>

最後提一點  若是同時用到漸顯和飛入，只須要設置好幾個間隔一致的class就能很簡單的混合使用了，例若有10個控制漸顯的動畫，和5個控制飛入的動畫

.word_1 {
    opacity: 0;
    -webkit-animation:.8s ease word_1_kf .5s forwards;
}
.word_2 {
    opacity: 0;
    -webkit-animation:.8s ease word_1_kf 1.3s forwards;
}
.word_3 {
    opacity: 0;
    -webkit-animation:.8s ease word_1_kf 2.1s forwards;
}
.word_4 {
    opacity: 0;
    -webkit-animation:.8s ease word_1_kf 2.9s forwards;
}
.word_5 {
    opacity: 0;
    -webkit-animation:.8s ease word_1_kf 3.7s forwards;
}
.word_6 {
    opacity: 0;
    -webkit-animation:.8s ease word_1_kf 4.5s forwards;
}
.word_7 {
    opacity: 0;
    -webkit-animation:.8s ease word_1_kf 5.3s forwards;
}
.word_8 {
    opacity: 0;
    -webkit-animation:.8s ease word_1_kf 6.1s forwards;
}
.word_9 {
    opacity: 0;
    -webkit-animation:.8s ease word_1_kf 6.9s forwards;
}
.word_10 {
    opacity: 0;
    -webkit-animation:.8s ease word_1_kf 7.7s forwards;
}

/********************** 左邊動畫 start  ********************************/
.translateX_animation_left_1 {
    -webkit-transform: translateX(-100%);
    -webkit-animation: .8s ease translateX_1_left_kf forwards .5s;
}
.translateX_animation_left_2 {
    -webkit-transform: translateX(-100%);
    -webkit-animation: .8s ease translateX_1_left_kf forwards 1.3s;
}
.translateX_animation_left_3 {
    -webkit-transform: translateX(-100%);
    -webkit-animation: .8s ease translateX_1_left_kf forwards 2.1s;
}
@-webkit-keyframes translateX_1_left_kf {
    0% {
        -webkit-transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(0);
    }
}
/********************** 左邊動畫 end  ********************************/
/********************** 右邊動畫 start  ********************************/
.translateX_animation_right_1 {
    -webkit-transform: translateX(-100%);
    -webkit-animation: .8s ease translateX_1_right_kf .5 forwards;
}
.translateX_animation_right_2 {
    -webkit-transform: translateX(100%);
    -webkit-animation: .8s ease translateX_1_right_kf forwards 1.3s;
}

.translateX_animation_right_3 {
    -webkit-transform: translateX(100%);
    -webkit-animation: .8s ease translateX_1_right_kf forwards 2.1s;
}
.translateX_animation_right_4 {
    -webkit-transform: translateX(100%);
    -webkit-animation: .8s ease translateX_1_right_kf forwards 2.9s;
}
.translateX_animation_right_5 {
    -webkit-transform: translateX(100%);
    -webkit-animation: .8s ease translateX_1_right_kf forwards 3.7s;
}
@-webkit-keyframes translateX_1_right_kf {
    0% {
        -webkit-transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(0);
    }
}
/********************** 右邊動畫 end  ********************************/

 

word_1後能夠隨意執行  translateX_animation_right_2 或者 translateX_animation_left_2 ，而後word_3神馬的。

 

好，暫時遇到的項目只用到了漸顯和飛入，這2個經常使用的通用動畫，小夥伴們有更多的實際場景歡迎交流，寫得很差的地方也歡迎吐槽，謝謝看完  謝謝謝謝。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程