Jquery 边界动画加载？

我想知道如何制作边界效果。我所做的只是css3中的淡入效果，但我仍然想要滑动效果。谢谢

如示例所示，边界从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>

谢谢。

您可以同时设置

#左、右

和

#上、下

的动画。这是我的建议

创建两个动画集，一个用于宽度，另一个用于高度：

/* 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

s的外观：

<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

类保留为普通动画属性（您可能应该重命名它），并将

不透明度

属性从设置位置移除。

谢谢。太完美了D

<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>