加载边框动画？

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属性。