移動通過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動畫在相反方向上的兩行

回答

相關問題