加載邊框動畫？

Question

我想知道如何製作邊框效果。我所做的是在css3中這個淡入效果：http://jsfiddle.net/ueu64hps/，但我仍然希望這種滑動效果。謝謝。

在例子中，http://velvethammer.net/的邊界從20％滑動到100％。 這是我想要的，但在頁面加載。

我將粘貼下面我的代碼：

的HTML：

<div id="left" class = "slow fade-in"></div> 
    <div id="right" class = "slow fade-in"></div> 
    <div id="top" class = "slow fade-in"></div> 
    <div id="bottom" class = "slow fade-in"></div> 


    <div class = "wrap"> 
    <h2>Some random text.</h2>  
    </div> 

而CSS：

*{ 
    margin: 0; 
    padding: 0; 
} 
#top, #bottom, #left, #right { 
    background: black; 
    position: fixed; 
} 
#left, #right { 
    top: 0; bottom: 0; 
    width: 35px; 
} 
#left { 
    left: 0; 
} 
#right { 
    right: 0; 
} 
#top, #bottom { 
    left: 0; right: 0; 
    height: 35px; 
} 
#top { 
    top: 0; 
} 
#bottom { 
    bottom: 0; 
} 
.wrap{ 
    margin:35px; 
} 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 

.fade-in { 
    opacity:0; /* make things invisible upon start */ 
    -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ 
    -moz-animation:fadeIn ease-in 1; 
    animation:fadeIn ease-in 1; 

    -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ 
    -moz-animation-fill-mode:forwards; 
    animation-fill-mode:forwards; 

    -webkit-animation-duration:1s; 
    -moz-animation-duration:1s; 
    animation-duration:1s; 
} 
.fade-in.slow { 
-webkit-animation-delay: 1.5s; 
-moz-animation-delay: 1.5s; 
animation-delay: 1.5s; 
} 

感謝。

Answer 1

您可以將#left, #right和#top, #bottom一起動畫到一起。這是complete example。

創建2個動畫集，一個寬度和其他身高：

/* For left and right animation */ 
@-webkit-keyframes easeInLeft { from { width:0; } to { width:30px; } } 
@-moz-keyframes easeInLeft { from { width:0; } to { width:30px; } } 
@keyframes   easeInLeft { from { width:0; } to { width:30px; } } 

/* For top and bottom animation */  
@-webkit-keyframes easeInTop { from { height:0; } to { height:30px; } } 
@-moz-keyframes easeInTop { from { height:0; } to { height:30px; } } 
@keyframes   easeInTop { from { height:0; } to { height:30px; } } 

然後發揮它在各自的div S：

.ease-in-left { 
    width: 0; /* Set it to 0 initially */ 
    -webkit-animation: easeInLeft ease-in 1; 
     -moz-animation: easeInLeft ease-in 1; 
      animation: easeInLeft ease-in 1; 
} 

.ease-in-top { 
    height: 0; /* Set it to 0 initially */ 
    -webkit-animation: easeInTop ease-in 1; 
     -moz-animation: easeInTop ease-in 1; 
      animation: easeInTop ease-in 1; 
} 

這裏還有什麼div看看這樣的：

<div id="left" class = "slow fade-in ease-in-left"></div> 
<div id="right" class = "slow fade-in ease-in-left"></div> 
<div id="top" class = "slow fade-in ease-in-top"></div> 
<div id="bottom" class = "slow fade-in ease-in-top"></div> 

我離開了.fade-in類別（您應該重命名該類別），並使用常見動畫屬性，並從其設置的任何位置刪除opacity屬性。