CSS動畫開始從中東

Question

我有一個非常簡單的動畫有我創建了動畫的寬度，高度邊界，然後中心變淡。

我遇到的問題是我不能圖瞭解如何從中心動畫，而不是從左到右（用於頂部和底部邊框）和從頂部到底部（用於側邊框）。

有什麼簡單的方法讓動畫從中間發生？對於頂部和底部動畫代碼

例子：

@keyframes tb {                
    0% {width: 0;} 
    100% {width: 800px} 
} 

JSFiddle of the code.

Answer 1

您需要動畫left和top了。對於水平條，請將第一個關鍵幀的屬性left設置爲400px（50％），並將最後一個關鍵幀的屬性設置爲0px。垂直條也一樣。這是您的固定例如：

@import url(https://fonts.googleapis.com/css?family=Montserrat:700); 
 
html{ 
 
    background: black; 
 
} 
 
#holder{ 
 
    width: 800px; 
 
    display: block; 
 
    position: relative; 
 
} 
 
#follower { 
 
    display: block; 
 
    text-align: center; 
 
    padding: 20px; 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 30px; 
 
    line-height: 70px; 
 
    color: #fff; 
 
    background: rgba(255,255,255,.1); 
 
    animation: main 2s ease-out; 
 
    -webkit-animation: main 2s ease-out; 
 
} 
 

 
@keyframes main { \t \t  \t \t \t  \t \t \t  \t \t \t  
 
    0% {opacity: 0} 
 
    50% {opacity: 0} 
 
    100%{opacity: 1} 
 
} 
 
@-webkit-keyframes main { \t \t \t  \t \t \t  \t \t \t  \t \t \t  
 
    0% {opacity: 0} 
 
    50% {opacity: 0} 
 
    100%{opacity: 1} 
 
} 
 

 
#t, #b { 
 
    width: 800px; 
 
    height: 2px; 
 
    background: #fff; 
 
    position: absolute; 
 
    display: block; 
 
    animation: tb .5s 1 ease-out; 
 
    -webkit-animation: tb .5s 1 ease-out; 
 
} 
 

 
#t { 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#b{ 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 

 
#r, #l { 
 
    width: 2px; 
 
    height: 110px; 
 
    background: #fff; 
 
    position: absolute; 
 
    display: block; 
 
    animation: rl 1s 1 ease-out; 
 
    -webkit-animation: rl 1s 1 ease-out; 
 
} 
 

 
#r{ 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
#l { 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
@keyframes tb { \t \t  \t \t \t  \t \t \t  \t \t \t  
 
    0% { 
 
     width: 0; 
 
     left: 400px; 
 
    } 
 
    100% { 
 
     width: 800px 
 
     left: 0; 
 
    } 
 
} 
 

 
@keyframes rl { \t \t  \t \t \t  \t \t \t  \t \t \t  
 
    0% {height: 0} 
 
    50% { 
 
     height: 0; 
 
     top: 55px; 
 
    } 
 
    100% { 
 
     height: 110px; 
 
     top: 0; 
 
    } 
 
}

<div id="holder"> 
 
    <div id="t"></div> 
 
    <div id="b"></div> 
 
    <div id="r"></div> 
 
    <div id="l"></div> 
 
    <div id="follower"> 
 
    Super Long Text Goest Here! 
 
    </div> 
 
</div>