当宽度为100%时,从中心扩展/动画div

Question

我有一个带边框的div,我使用关键帧来扩展它的载荷,但我希望它从中心而不是从左到右扩展.

http://andylilien.com/index2015.html

css:

.navback { 
position:absolute;
bottom:0px;
padding-bottom:-8px;
width:100%;
height:17px;
background-color:#FFF;
border-top: 1px solid #d0d0d0;
z-index:999;
}   
@-webkit-keyframes expandline{
0%{width:0%;}
50%{width:50%;}
100%{width:100%;}
}
.navback{
-webkit-animation:expandline 2s;
}

Answer 1

正如您所做的那样调整高度和宽度,但transform通过适当地定位左侧和顶部来调整元素.

此外,如果您使用常见的缓动函数或线性动画,则实际上并不需要关键帧动画.

#expander {
  position:absolute;
  width: 0;
  height: 17px;
  background-color: #FFF;
  border-top: 1px solid red;
  z-index: 999;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  -webkit-animation: expandline 2s;
}

@-webkit-keyframes expandline{
  0%   { width:   0%; }
  50%  { width:  50%; }
  100% { width: 100%; }
}

<div id="expander"></div>

CSS发生了什么:

• 在它的初始位置启动元素(完全样式和定位,但宽度为0)
• 向元素添加转换,定义要转换的属性以及转换需要多长时间
  • 现在,只要其中一个指定的属性发生更改,它就会应用转换而不是立即应用更改
• 定义一个表示元素最终状态的类(完全样式化和定位,如初始状态,但具有您想要的宽度)

中心行为的扩展是以下结果:

/* #expander will now be positioned relative to the nearest ancestor with a position other than `static`, or the `body` element if nothing else qualifies */
position: absolute;

/* The top of #expander will be 50% down the positioning context's height (i.e., the top of #expander is vertically centered in its parent) */
top: 50%;

/* The left of #expander will be 50% of the positioning context's width (i.e., the left of #expander is horizontally centered in its parent) */
left: 50%;

/* Translate #expander 50% of its own width to the left, and 50% of its own height in the up direction */
transform: translate(-50%, -50%);

由于我们没有transform为其设置动画,因此它会继续按照初始规则中的定义应用:#expander在其父级中保持垂直和水平居中,无论其高度或宽度如何.

现在,您只需使用适当的触发器(您说您正在使用onload)来应用扩展类并触发转换.

希望这可以帮助.