expanding/animating 当宽度为 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）
向元素添加一个过渡，定义哪些属性将过渡，以及过渡需要多长时间
- 现在，只要指定属性之一发生变化，它就会应用过渡，而不是立即应用变化
定义代表元素最终状态的 class（完全样式化和定位，与初始状态相同，但具有您想要的宽度）

从中心扩展的行为是以下原因的结果：

/* #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）来应用展开的 class 并触发转换。

希望对您有所帮助。

expanding/animating 当宽度为 100% 时距中心 div

expanding/animating a div from center when width is 100%

css

keyframe