通过 CSS3 动画向相反方向移动两条线

Question

标记

<div class="lline"></div>
<div class="projekt"><h1>SERVICES</h1></div>
<div class="rline"></div>

CSS

@keyframes anima {
    from {width: 0%; }
    to { width: 40%; }
}

.lline { 
    margin-top: 20px; 
    width: 40%; 
    background-color: #333; 
    animation-name: anima; 
    animation-duration:1s; 
    height: 2px; 
    float: left; }

.projekt { 
    text-align: center; 
    width: 14%; 
    margin: 0 auto; }

.rline { 
    margin-top: -38px;
    width: 40%; 
    background-color: #333; 
    animation-name: anima; 
    animation-duration:1s; 
    height: 2px;  
    float: right; }

我需要为从文本 SERVICES 到其边框的两条线设置动画。

我尝试用 animation-direction 属性设置它，但没有成功。线路必须响应，所以我必须使用一些媒体查询，但如果你知道更好的方法，我会很高兴。谢谢

Answer 1

您可以使用伪元素和 display: flex 以更少的标记来完成此操作，如本例所示：http://codepen.io/fcalderan/pen/aObYLK

标记

<h1 class="animateheading">SERVICES</h1>

Css

.animateheading {
   width: 100%;
   text-align: center;
   overflow: hidden;
   display: flex;
   align-items: center;
}

/* lines */
.animateheading:before,
.animateheading:after {
   content: "";
   flex-grow: 1;
   height: 1px;
   min-width: 100px;
   border-top: 1px #333 solid;
}

/* animation toward left */
.animateheading:before { 
   margin-right: .3em; 
   -webkit-animation: lineleft 3s linear 1s forwards; 
   -moz-animation: lineleft 3s linear 1s forwards; 
   animation: lineleft 3s linear 1s forwards; 
}

/* animation toward right */
.animateheading:after  { 
   margin-left: .3em;
   -webkit-animation: lineright 3s linear 1s forwards; 
   -moz-animation: lineright 3s linear 1s forwards; 
   animation: lineright 3s linear 1s forwards; 
} 


/* keyframes for left animation */ 
@-webkit-keyframes lineleft {
   from { -webkit-transform: translate(0, 0); }
   to { -webkit-transform: translate(-100%, 0); }
}

@-moz-keyframes lineleft {
   from { -moz-transform: translate(0, 0); }
   to { -moz-transform: translate(-100%, 0); }
}

@keyframes lineleft {
   from { transform: translate(0, 0); }
   to { transform: translate(-100%, 0); }
}

/* keyframes for right animation */ 
@-webkit-keyframes lineright {
   from { -webkit-transform: translate(0, 0); }
   to { -webkit-transform: translate(100%, 0); }
}

@-moz-keyframes lineright {
   from { -moz-transform: translate(0, 0); }
   to { -moz-transform: translate(100%, 0); }
}

@keyframes lineright {
   from { transform: translate(0, 0); }
   to { transform: translate(100%, 0); }
}

关于此实现的一些注释

Flexbox 位置可能需要几种不同的语法，因为它是跨浏览器实现的：参见 http://caniuse.com/#feat=flexbox；由于它仅出于样式目的而应用于伪元素，因此缺乏支持可被视为 优雅降级;
此代码适用于任何长度的文本和每个 viewport 大小，因为它使用百分比值对 transform 属性进行动画处理。无论文本有多少行，行总是垂直居中；
根据需要为 keyframes 添加尽可能多的供应商前缀；
animation-fill-mode 属性设置为向前，因此将保留最后一个动画帧（并且线条不会返回）。
如果您需要始终看到两行，即使是非常长的文本，请像我在示例中所做的那样在伪元素上设置一个 min-width，否则您可以安全地删除它。

通过 CSS3 动画向相反方向移动两条线

Moving two lines in opposite directions via CSS3 animations

css

responsive-design

css-animations