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>