css3動畫--邊框線條動畫

　網上看到一個css3動畫，地址

最開始思路是，里面一個DIV方塊，右上角一個同樣大小的div1,向上,向右平移8px，設div1的border-top,border-right值形成，如圖所示

再用clip截取一半，形成半折角。

同理左下角建一個div,向左、向下平移8px,設border-left,border-bottom值，用clip截取形成

 

<div class="cont">
	<div class="bb"></div>
</div>

html,body{
            margin: 0;padding: 0;
            background: #101010;
        }
        .cont{
            width:500px;
            margin: 150px auto;
        }
        
        .bb{
            position: relative;
            width: 200px;
            height: 200px;
            background: #666666;
            border: 1px solid #5EF75E;
        }
        .bb:before{
            content: " ";
            display: block;
            position: absolute;
            width:200px;
            height:200px;
            top: -10px;
            right: -10px;
            border-top:2px solid #00FF00;
            border-right:2px solid #00FF00;
            z-index:10;
            box-sizing: border-box;
            clip:rect(0px,200px,100px,100px);
        }
        
        .bb:after{
            content: " ";
            display: block;
            position: absolute;
            width:200px;
            height:200px;
            left: -10px;
            bottom: -10px;
            border-left:2px solid #00FF00;
            border-bottom:2px solid #00FF00;
            z-index:10;
            box-sizing: border-box;
            clip:rect(100px,100px,200px,0px);
        }

　

然而着手寫動畫CSS的時候發現問題，線條逆時針旋轉，右上角的線條不能平滑過渡到左下角。

然后看了一下人家寫的代碼，才發現里面兩個DIV其實是比最初DIV大的，而且樣式一樣！！！

再仔細看看動畫發現，其實就是兩條一樣長的線條在運動，只是一條比另一條塊半圈

所以設置動畫的時候只要一個延遲1/2時間開始就可以了

Dooooo....敲完代碼

        .bb{
            position: relative;
            width: 200px;
            height: 200px;
            background: #666666;
            border: 1px solid #5EF75E;
        }
        .bb:before,.bb:after{
            content: " ";
            display: block;
            position: absolute;
            width:220px;
            height:220px;
            top: -10px;
            left: -10px;
            border:2px solid #00FF00;
            z-index:10;
            box-sizing: border-box;
            -webkit-animation: clipAni 4s infinite linear;
        }
        .bb:before{
            -webkit-animation-delay: 2s;
        }
        @keyframes  clipAni{
            0%,100%{
                clip:rect(0px,220px,220px,217px);
            }
            25%{
                clip:rect(0px,220px,3px,0px);
            }
            50%{
                clip:rect(0px,3px,220px,0px);
            }
            75%{
                clip:rect(217px,220px,220px,0px);
            }            
        }

運行一看，前2s不對，DIV4周都有邊框，2s后開始正常。想想確實是，div:before設置了邊框動畫延遲2s,前2s保持原有狀態。

但是要進入頁面就開始動畫，且兩個動畫有時間錯開，怎么辦？

哈哈，想起動畫delay負數的妙用

css:

html,body{
            margin: 0;padding: 0;
            background: #101010;
        }
        .cont{
            width:500px;
            margin: 50px auto;
        }
        
        .bb{
            position: relative;
            width: 200px;
            height: 200px;
            background: #666666;
            border: 1px solid #5EF75E;
        }
        .bb:before,.bb:after{
            content: " ";
            display: block;
            position: absolute;
            width:220px;
            height:220px;
            top: -10px;
            left: -10px;
            border:2px solid #00FF00;
            z-index:10;
            box-sizing: border-box;
            -webkit-animation: clipAni 4s infinite linear;
        }
        .bb:before{
            -webkit-animation-delay: -2s;
        }
        @keyframes  clipAni{
            0%,100%{
                clip:rect(0px,220px,220px,217px);
            }
            25%{
                clip:rect(0px,220px,3px,0px);
            }
            50%{
                clip:rect(0px,3px,220px,0px);
            }
            75%{
                clip:rect(217px,220px,220px,0px);
            }            
        }

 成功~！

查看演示