Oi, galera! Tudo bem com vocês? Então, gostaria de uma ajudinha.
Estou realizando um projeto que é composto com uma animação em CSS. A mesma, interage com o comando “infinite”. Porém, gostaria de parar essa animação depois de 2 movimentos, pois tenho um texto na mesma página, e quando a animação entra em movimento, esse texto sobe para o inicio da animação (quando a tela é redimensionada a um dispositivo com o recurso “inspecionar elemento”). Seria possível manter os movimentos da animação sem que ela faça com que a tela/texto suba?
Tenho o seguinte código HTML e CSS:
h2 { color: darkgray; font-family: 'Playlist Script'; font-weight:lighter; font-size: 3em; line-height: 140%; white-space: nowrap;/*Evitar saltos de línea*/ overflow: hidden; width: 30em; animation: keyframes 5s steps(500) infinite; } @keyframes keyframes{ from{ width: 0px;} } @font-face{ font-family: 'Playlist Script'; font-style: normal; font-weight: normal; src: Baby/fonts('Playlist Script') url('Playlist Script.woff') format('woff'); } <!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Import materialize.css--> <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> <!--Meu CSS--> <link type="text/css" rel="stylesheet" href="css/style3.css"/> <link href="https://fonts.googleapis.com/css?family=Bad+Script|Bahianita|Cookie|Dancing+Script|Great+Vibes|Khand|Lobster|Open+Sans+Condensed:300|Oswald|Playball|Sacramento|Satisfy&display=swap" rel="stylesheet"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta lang="pt-br"> <meta charset="UTF-8"> </head> <body> <!-- Início NavBar--> <div class="navbar-fixed"> <nav class="navbar navbar-custom"> <div class="nav-wrapper"> <a href="my%20girl.html" class="brand-logo left">My aura</a> </div> </nav> </div> <div class="container"> <div class="row"> <div class="col s12"> <p align="center"> <section> <h2>Oi</h2> <!--Text fotn export--> <link type="text/css" rel="stylesheet" href="css/style%20letra.css"/> </section> </div> </p> <div class="img center-align"> <img class="imgcore" width="20px" src="img/core.png"></a> </div> <br><h3>SOBRE VOCÊ</h3></br> <div class="areaImagem"> <img widrh="70px" class="img" src="img/larg.png" /> </div> <p2 class="flow-text center-align"> É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. É apenas um teste, de inicialização. </p2> </div> </div> </div> </body> </html>Agradeço desde já.
