2016-03-29 91 views
0

我已經爲我的裝載機以下CSS類:CSS動畫怪異的跳躍點

.loading{ 
    color:black; 
    position:fixed; 
    width: 270px; 
    height:100px; 
    font-size:20px; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    transition: 1s ease-out; 
    opacity:1; 
} 



    .loading:after { 
    overflow: hidden; 
    display: inline-block; 
    vertical-align: bottom; 
    animation: ellipsis steps(4,end) 900ms infinite; 
    content: "\2026"; /* ascii code for the ellipsis character */ 
    width: 0px; 
    } 

    @keyframes ellipsis { 
    to { 
     width: 20px; 
    } 
    } 

    @-webkit-keyframes ellipsis { 
    to { 
     width: 20px; 
    } 
    } 


.centered{ 
    vertical-align:middle; 
    text-align:center; 
    align-items: center; 
    justify-content: center; 
} 

我用它這樣的:

<div class="loading centered"> 
    Loading your results 
</div> 

正如你可以看到here,該點被移動整個標籤在左邊。我如何解決這個問題?

回答

1

你僞設置爲position: absolute並將其移動到右側(left: 100%

Updated Plunker

.loading{ 
    color:black; 
    position:fixed; 
    width: 180px;    /* changed */ 
    height:100px; 
    font-size:20px; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    transition: 1s ease-out; 
    opacity:1; 
}  
    .loading:after { 
    overflow: hidden; 
    display: inline-block; 
    position: absolute;  /* added */ 
    left: 100%;    /* added */ 
    vertical-align: bottom; 
    animation: ellipsis steps(4,end) 900ms infinite; 
    content: "\2026"; /* ascii code for the ellipsis character */ 
    width: 0px; 
    }