移动通过CSS3动画在相反方向上的两行

-1

我有这样的代码：https://jsfiddle.net/xuj0uu2k/4/移动通过CSS3动画在相反方向上的两行

标记

<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属性来设置它，但它不起作用。线条必须具有响应性，所以我必须使用一些媒体查询，但如果您知道更好的方式来做到这一点，我会很高兴。谢谢

来源

2015-04-23 culter

请不要规避质量过滤器。 – BoltClock

谢谢Fabrizio。我需要在相反方向制作动画，因为它在示例中有效（不适用于Opera和Safari） – culter

等待重新打开您的问题并请考虑您的下一个问题的@BoltClock建议 – fcalderan

你可以在这个例子用更少的标记使用pseudoelements和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，正如我在示例中所做的那样，否则可以安全地删除它。

来源

2015-04-23 11:49:40 fcalderan

移动通过CSS3动画在相反方向上的两行

回答

相关问题