如何使CSS打字機效果響應？

但是，我做了這個CSS打字機動畫，我無法使其響應。如何使CSS打字機效果響應？

下面是我的代碼：

HTML：

<div class="animation"> 
    <p>CRISTIANO RONALDO</p> 
</div>

CSS：

.animation p{ 
    color: #D64933; 
    font-family: 'Lato', cursive; 
    font-size: 50px; 
    white-space: nowrap; 
    overflow: hidden; 
    width: 30em; 
    animation: title 7s steps(70, end); 
    margin-bottom: 40px; 

} 

@keyframes title{ 
    from { width: 0; opacity: 0.0;} 
    to { opacity: 1.0; } 
}

我希望動畫從頁面的中心開始，也響應。關於如何實現的任何想法？

鏈接CodePen

來源

2017-06-07 user2035893

這可能是一個開始：[grow-before-content-width-from-center]（https://stackoverflow.com/questions/44379569/grow-before-content-width-from-center/44379605#44379605），你在哪裏居中並添加您的動畫步驟 – LGSon

與漂亮的直Flexbox的前進。

將您的動畫包裝在容器中。組顯示撓曲證明內容和對準項中心體html和容器的

設定高度爲100％

集字體大小的圖的高度，以便它保持響應

body, html{ 
    height: 100%; 
} 

.container{ 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.animation p{ 
    color: #D64933; 
    font-family: 'Lato', cursive; 
    font-size: 10vh; 
    white-space: nowrap; 
    overflow: hidden; 
    width: 30em; 
    animation: title 7s steps(70, end); 
    margin-bottom: 40px; 

} 

@keyframes title{ 
    from { width: 0; opacity: 0.0;} 
    to { opacity: 1.0; } 
} 

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<div class="container"> 
    <div class="animation"> 
    <p class="text-center">CRISTIANO RONALDO</p> 
    </div> 
</div>

來源

2017-06-07 13:14:49 Tik

我並不是說這是最好的修復，但至少它的工作原理（壽有一些顫抖）：

/*CSS*/ 
.animation { 
width: 100%; 
text-align: center; 
} 

.animation p{ 
margin: 0; 
position: absolute; 
left: 50%; 
transform: translate(-50%, -50%); 
color: #D64933; 
font-family: 'Lato', cursive; 
font-size: 50px; 
white-space: nowrap; 
overflow: hidden; 
width: 30em; 
animation: title 3s steps(70, end); 
margin-bottom: 40px; 

}

來源

2017-06-07 13:14:16 NoOorZ24

如何使CSS打字機效果響應？

回答

相關問題