向下滑動並停止使用CSS加載頁面

我正在嘗試從頁面頂部向下滑動並在top: 100px;處完成。向下滑動並停止使用CSS加載頁面

我的CSS做得很對，但是在動畫運行後，它回到top: 0px;。

我需要它保持在100px直到用戶關閉它，這是用JS完成之後。但是我想用CSS完成幻燈片。

這裏是我的CSS：

.flash-messages { 
    &__wrapper { 
    position: absolute; 
    width: 40%; 
    left: 30%; 
    background: rgba(128, 128, 128, 0.85); 
    margin: 50px; 
    overflow: visible; 
    padding: 0; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-name: fadeOut; 
    animation-duration: 1s; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: 1; 
    animation-name: fadeOut; 

    div p { 
     color: white; 
     font-size: 25px; 
     text-align: center; 
    } 
    } 
} 


@-webkit-keyframes fadeOut { 
    0%  { -webkit-transform: translateY(0%); } 
    100% {-webkit-transform: translateY(100px) } 
}

這裏是HTML：

<div class="flash-messages__wrapper"> 
    <div class="flash-messages__close"></div> 
    <div n:foreach="$flashes as $flash" n:class="flash, $flash->type"> 
     <p>{$flash->message}</p> 
    </div> 
</div>

有什麼建議？

來源

2017-02-21 Jousi

使用[CSS transisitons（HTTPS：//www.w3schools .com/css/css3_transitions.asp），當你將一個元素從一個狀態移動到另一個狀態時，它們會更好地處理動畫。 – Callum

這可能工作。我使用top代替transform，並完成animation元素返回到它之後的原始狀態，因此使用top:100px在.flash-messages__wrapper

.flash-messages__wrapper { 
 
    position: absolute; 
 
    width: 40%; 
 
    left: 30%; 
 
    background: rgba(128, 128, 128, 0.85); 
 
    margin: 50px; 
 
    overflow: visible; 
 
    padding: 0; 
 
    -webkit-animation-duration: 1s; 
 
    -webkit-animation-timing-function: ease-in-out; 
 
    -webkit-animation-iteration-count: 1; 
 
    -webkit-animation-name: fadeOut; 
 
    animation-duration: 1s; 
 
    animation-timing-function: ease-in-out; 
 
    animation-iteration-count: 1; 
 
    animation-name: fadeOut; 
 
    top:100px; 
 
} 
 

 
.flash-messages__wrapper div p { 
 
    color: white; 
 
    font-size: 25px; 
 
    text-align: center; 
 
} 
 

 
@-webkit-keyframes fadeOut { 
 
    0% { 
 
    top:0; 
 
    } 
 
    100% { 
 
    top:100px; 
 
    } 
 
}

<div class="flash-messages__wrapper"> 
 
    <div class="flash-messages__close"> 
 

 
    </div> 
 
    <div n:foreach="$flashes as $flash" n:class="flash, $flash->type"> 
 
    <p>{$flash->message}</p> 
 
    </div> 
 
</div>

來源

2017-02-21 10:43:22

向下滑動並停止使用CSS加載頁面

回答

相關問題