css - 当宽度为 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

像您所做的那样调整高度和宽度，但是通过适本地定位元素的左侧和顶部来转换元素。

此外，如果您使用的是通用缓动函数或线性动画，则您实际上并不需要关键帧动画。

#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)来应用扩展类并触发转换。

希望这对您有所帮助。