CSS - 文本向上移動

-1

在我的頁面加載中，我試圖讓文本在頁面加載時向上移動並淡入。CSS - 文本向上移動

（這裏的例子：https://fabriceleven.com/design/creating-fancy-css3-fade-in-animations-on-page-load/）

我有淡入工作正常，但是當我嘗試以下的爲moveUp動畫代碼，文本不會出現在所有。我哪裏錯了？

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 

.fade-in { 
    opacity:0; 
    -webkit-animation:fadeIn ease-in 1; 
    -moz-animation:fadeIn ease-in 1; 
    animation:fadeIn ease-in 1; 

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards; 
    animation-fill-mode:forwards; 

    -webkit-animation-duration:1s; 
    -moz-animation-duration:1s; 
    animation-duration:1s; 
} 

@keyframes moveUp { 
    0% { 
     transform: translate(0px,20px); 
    } 
    100% { 
     transform: translate(0px,0px); 
    } 
} 

.move-up { 
    animation:moveUp ease-in 1; 
    animation-fill-mode:forwards; 
    animation-duration:1s; 
}

而我的HTML：

<h1 class="paddingTop20 fade-in move-up">Leading Topic</h1>

來源

2016-09-27 userMod2

FWIW，我看到的文字，但沒有動畫。 – BSMP

在頁面頂部，如果刷新，則「創建幻想css3 ...」動畫的文本位於該位置 – userMod2

您的動畫會將元素_down_移動不起來。 – Turnip

這可以最好用JavaScript實現的。沿線的東西，

<!DOCTYPE html> 
<head> 
    <title>Happy rising text</title> 

    <style type="text/css"> 
     #yourHtmlTag{ 
      text-align: center; 

      /*This is needed.*/ 
      position: absolute; 
      top: 30%; 
      transition: all 1s ease-out; 
     } 
    </style> 
</head> 
<body onload="floatUp()"> 
    <header id="yourHtmlTag">Float Up!</header> 

<!-- The script needs to be below where it is called --> 
<script type="text/javascript"> 
    function floatUp(){ 
     document.getElementById('yourHtmlTag').style.top = "15%"; 
    } 
</script> 
</body>

這已經過測試，如果您有任何其他問題不要猶豫，問！

來源

2016-09-27 22:07:37 Tishbyte

CSS - 文本向上移動

回答

相關問題