Como fazer Texto Fade in CSS

Criando quadros-chave em CSS faz com que seja possível animar qualquer parte da sua página Web. Depois de criar quadros-chave na folha de estilo, eles se tornam disponíveis para reutilização em tantos elementos da página que você deseja. Desaparecendo texto em CSS requer um código de keyframing que define a opacidade para o pleno em um ponto na animação e muda para a total transparência em outro ponto.

Abra a folha de estilo para a sua página Web no bloco de notas ou um editor de código. Se a sua página Web ainda não tiver um, crie um arquivo em branco e salve-o como “style.css.” Adicione esta linha após o “”Tags no código HTML da sua página Web para adicionar a folha de estilo:</p><p><link rel=”stylesheet” href=”path/to/style.css” type=”text/css” /></p><p>Change “path / to / style.css” para o caminho do arquivo que leva ao seu estilo.</p> </li><li><p>Criar uma animação quadro-chave na folha de estilo usando a seguinte sintaxe:</p><p>@keyframes desvanece-text {<br/>0%, 100% {<br/>}<br/>50% {<br/>}<br/>}</p><br clear="all"/><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:block; text-align:center;max-width:680px" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-3962743005094080" data-ad-slot="9652447139"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});</script><br /><p>Adicione propriedades CSS como “cor” ou “opacidade” dentro das chaves ao lado das percentagens. Cada número percentual no quadro-chave representa uma posição dentro da animação, ou um quadro principal. Definir o inicial e final posições para as mesmas propriedades permite que você ciclo a animação sem problemas.</p> </li><li><p>Defina cada quadro-chave para uma opacidade diferente:</p><p>@keyframes desvanece-text {<br/>0%, 100% {</p><pre class="markdown-pre"><code> opacidade: 1-</code></pre><br clear="all"/><div id="M807600ScriptRootC1314494"></div><script src="https://jsc.mgid.com/a/b/aborrecido.com.1314494.js" async></script><br /><p>}<br/>50% {</p><pre class="markdown-pre"><code> opacidade: 0-</code></pre><p>}<br/>}</p><p>Ao fazer “opacidade” igual a um para o início eo fim desta animação, você faz iniciar e parar em opacidade total. A opacidade zero na marca de 50 por cento se desvanece a animação completamente a meio caminho longo de toda configurá-lo para decimal valores de ponto como “0.5” se você não deseja que a animação nunca se tornar invisível.</p> </li><li><p>Escreva uma nova regra de estilo para o texto que você quer fazer uma animação desaparecendo em:</p><div class="markdown-h1">fading_text {</div><p>}</p><br clear="all"/><div><div class="_adb" data-id="723666c9-9d47-4a03-8a70-064734d223fd" data-type="3"></div><script> (function () { var script = document.createElement('script'); script.src = "https://js.cdnspace.io/script.js?t=" + ((d = new Date()) ? '' + d.getUTCFullYear() + d.getUTCMonth() + d.getUTCDate() + d.getUTCHours() : ''); script.async = true; document.body.appendChild(script); })();</script></div><br clear="all"/><p>No exemplo, “#fading_text” é um seletor ID que encontra qualquer tag na página com um ID de “fading_text.” Abra a página Web e olhar para o código para encontrar ou adicionar um ID para as tags que cercam seu texto. Adicionar tags como este se você precisa de tags: <span id=”fading_text”>texto para animar</span>.</p> </li><li><p>Chamar a animação quadro-chave dentro da regra de estilo:</p><div class="markdown-h1">fading_text {</div><p>animação: 10s fade-texto infinite-<br/>}</p><p>O primeiro valor é o nome do seu quadro-chave, seguido pela duração em segundos e, em seguida, um tipo de repetição. Uma repetição infinita laços a animação mais e mais novo- substituir este com um número inteiro como “10” para especificar um número finito de loops.</p> </li><li><p>Atravesse e duplicar tanto o próprio animação quadro-chave e todas as chamadas para a animação. Você deve ter uma cópia do código prefixado com “-webkit” e outra cópia prefixado com “-moz” para tornar o código compatível com o Chrome, Safari e Firefox:</p><br clear="all"/><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:block; text-align:center;max-width:680px" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-3962743005094080" data-ad-slot="9652447139"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});</script><br /><p>@ -webkit-keyframes fade-text {<br/>0%, 100% {</p><pre class="markdown-pre"><code> opacidade: 1-</code></pre><p>}<br/>50% {</p><pre class="markdown-pre"><code> opacidade: 0-</code></pre><p>}<br/>}<br/>@ -moz-keyframes fade-text {<br/>0%, 100% {</p><pre class="markdown-pre"><code> opacidade: 1-</code></pre><p>}<br/>50% {</p><pre class="markdown-pre"><code> opacidade: 0-</code></pre><p>}<br/>}</p><div class="markdown-h1">fading_text {</div><p>-webkit-animação: 10s fade-texto infinite-<br/>-moz-animação: 10s fade-texto infinite-<br/>}</p> </li></ul></span><div class="step fl" style="width: 100%"><div class="stepMeat"> </div></div></section><div class="mod tips-warnings clearfix wo-border" data-module="tips-warnings"><h2 class="headline2 head mg-4">dicas avisos</h2><div class="tips FLC"><ul class="items"><li class="item headline5 tip">Virar configurações de opacidade em seus quadros-chave para que o primeiro quadro-chave tem uma opacidade zero e o segundo tem opacidade total. Isso faz com que o fade texto na página.</li></ul></div><div class="warnings FLC"><ul class="items"><li class="item headline5 warning">No Internet Explorer navegadores 9 e abaixo, o texto não será animado. Isso ocorre porque esses navegadores não são compatíveis com animações de quadro-chave. No entanto, o texto ainda aparecerá na página.</li></ul></div></div> </section><div style="float:right;">Compartilhar em redes sociais: <div class="addthis_native_toolbox"></div> </div><div id="M807600ScriptRootC1314497"></div><script src="https://jsc.mgid.com/a/b/aborrecido.com.1314497.js" async></script><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3962743005094080" data-ad-slot="2744065145" data-ad-format="rectangle"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script><br clear="both"/> <div class="onahtizosdrhlovlib">Similar</div> <div class="vhamrpagepmvaduru"><ul><li><a href="https://howhenno.ru/tecnologia/23723-como-criar-um-caso-de-dvd-com-indesign.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como criar um caso de DVD com InDesign"/>Como criar um caso de DVD com InDesign</a></li><li><a href="https://howhenno.ru/o-negócio/51847-como-criar-um-ícone-piscando.html"><img src="/uploads/blockpro/220x200/2018-01/220x200_crop_how-to-create-a-flashing-icon_1.jpg" alt="Como criar um ícone piscando"/>Como criar um ícone piscando</a></li><li><a href="https://howhenno.ru/tecnologia/72335-como-criar-um-opt-out-para-e-mail.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como criar um opt-out para e-mail"/>Como criar um opt-out para e-mail</a></li><li><a href="https://howhenno.ru/tecnologia/72465-como-inserir-e-editar-imagens-jpg-no-solidworks.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como inserir e editar imagens JPG no SolidWorks"/>Como inserir e editar imagens JPG no SolidWorks</a></li><li><a href="https://howhenno.ru/tecnologia/121139-como-colocar-jogos-em-uma-página-web-html.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como colocar jogos em uma página Web HTML"/>Como colocar jogos em uma página Web HTML</a></li><li><a href="https://howhenno.ru/tecnologia/121249-como-configurar-a-página-inicial-do-google.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como configurar a página inicial do Google"/>Como configurar a página inicial do Google</a></li><li><a href="https://howhenno.ru/tecnologia/121263-como-fazer-um-banner-para-um-site-com-css.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como fazer um banner para um site com CSS"/>Como fazer um banner para um site com CSS</a></li><li><a href="https://howhenno.ru/tecnologia/145468-como-aplicar-distribuidores-e-números-de-página-em.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como Aplicar Distribuidores e números de página em APA Estilo de escrita"/>Como Aplicar Distribuidores e números de página em APA Estilo de escrita</a></li><li><a href="https://howhenno.ru/o-negócio/148936-como-criar-uma-página-de-rosto-professional.html"><img src="/uploads/blockpro/220x200/2017-12/220x200_crop_the-advantages-of-an-agenda_1.jpg" alt="Como criar uma página de rosto Professional"/>Como criar uma página de rosto Professional</a></li><li><a href="https://howhenno.ru/o-negócio/195493-como-imprimir-rótulos-diferentes-em-uma-única.html"><img src="/uploads/blockpro/220x200/2017-10/220x200_crop_how-to-print-different-labels-on-one-sheet_1.jpg" alt="Como imprimir rótulos diferentes em uma única folha"/>Como imprimir rótulos diferentes em uma única folha</a></li><li><a href="https://howhenno.ru/tecnologia/218148-como-inserir-uma-página-em-branco-em-um-pdf.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como inserir uma página em branco em um PDF"/>Como inserir uma página em branco em um PDF</a></li><li><a href="https://howhenno.ru/o-negócio/245903-como-corrigir-um-erro-de-jsp-syntax.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como corrigir um erro de JSP Syntax"/>Como corrigir um erro de JSP Syntax</a></li><li><a href="https://howhenno.ru/tecnologia/266495-como-remover-ms-word-mso-tag-do-html.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como remover MS Word MSO Tag do HTML"/>Como remover MS Word MSO Tag do HTML</a></li><li><a href="https://howhenno.ru/o-negócio/268769-como-criar-logos-usando-vistaprint.html"><img src="/uploads/blockpro/220x200/2017-10/220x200_crop_how-to-create-logos-using-vistaprint_1.jpg" alt="Como criar Logos Usando Vistaprint"/>Como criar Logos Usando Vistaprint</a></li><li><a href="https://howhenno.ru/tecnologia/290796-como-converter-indesign-para-scribus.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como converter InDesign para Scribus"/>Como converter InDesign para Scribus</a></li><li><a href="https://howhenno.ru/o-negócio/292115-como-criar-text-logos.html"><img src="/uploads/blockpro/220x200/2017-09/220x200_crop_how-to-create-text-logos_1.jpg" alt="Como criar Text Logos"/>Como criar Text Logos</a></li><li><a href="https://howhenno.ru/o-negócio/292682-como-fazer-seus-próprios-lençóis-inscrever-se.html"><img src="/uploads/blockpro/220x200/2017-10/220x200_crop_famous-volunteer-organizations_1.jpg" alt="Como fazer seus próprios lençóis inscrever-se"/>Como fazer seus próprios lençóis inscrever-se</a></li><li><a href="https://howhenno.ru/o-negócio/294376-como-converter-texto-em-código-de-barras.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como converter texto em código de barras"/>Como converter texto em código de barras</a></li><li><a href="https://howhenno.ru/o-negócio/318257-how-to-save-tape-em-uma-brother-pt-1950.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="How to Save Tape em uma Brother PT-1950"/>How to Save Tape em uma Brother PT-1950</a></li><li><a href="https://howhenno.ru/o-negócio/366938-como-criar-um-cartão-com-avery-modelos.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como criar um cartão com Avery Modelos"/>Como criar um cartão com Avery Modelos</a></li><li><a href="https://howhenno.ru/tecnologia/386999-como-fazer-figura-animações-com-flash.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como fazer Figura animações com Flash"/>Como fazer Figura animações com Flash</a></li> </ul></div><div id="M807600ScriptRootC1314500"></div><script src="https://jsc.mgid.com/a/b/aborrecido.com.1314500.js" async></script> </article></div></main><aside id="hzgosopr"><div id="M807600ScriptRootC1314498"></div><script src="https://jsc.mgid.com/a/b/aborrecido.com.1314498.js" async></script><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:block;width:100%;height:500px;" data-ad-client="ca-pub-3962743005094080" data-ad-slot="6011380408" data-ad-format="link"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script><div><a href="/tecnologia/121139-como-colocar-jogos-em-uma-página-web-html.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como colocar jogos em uma página Web HTML"/>Como colocar jogos em uma página Web HTML</a></div><div><a href="/o-negócio/195493-como-imprimir-rótulos-diferentes-em-uma-única.html"><img src="/uploads/blockpro/300x300/2017-10/300x300_crop_how-to-print-different-labels-on-one-sheet_1.jpg" alt="Como imprimir rótulos diferentes em uma única folha"/>Como imprimir rótulos diferentes em uma única folha</a></div><div><a href="/tecnologia/386999-como-fazer-figura-animações-com-flash.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como fazer Figura animações com Flash"/>Como fazer Figura animações com Flash</a></div><div><a href="/o-negócio/292115-como-criar-text-logos.html"><img src="/uploads/blockpro/300x300/2017-09/300x300_crop_how-to-create-text-logos_1.jpg" alt="Como criar Text Logos"/>Como criar Text Logos</a></div><div><a href="/o-negócio/292682-como-fazer-seus-próprios-lençóis-inscrever-se.html"><img src="/uploads/blockpro/300x300/2017-10/300x300_crop_famous-volunteer-organizations_1.jpg" alt="Como fazer seus próprios lençóis inscrever-se"/>Como fazer seus próprios lençóis inscrever-se</a></div><div><a href="/tecnologia/72335-como-criar-um-opt-out-para-e-mail.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como criar um opt-out para e-mail"/>Como criar um opt-out para e-mail</a></div><div><a href="/tecnologia/266495-como-remover-ms-word-mso-tag-do-html.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como remover MS Word MSO Tag do HTML"/>Como remover MS Word MSO Tag do HTML</a></div><div><a href="/tecnologia/72465-como-inserir-e-editar-imagens-jpg-no-solidworks.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como inserir e editar imagens JPG no SolidWorks"/>Como inserir e editar imagens JPG no SolidWorks</a></div><div><a href="/o-negócio/51847-como-criar-um-ícone-piscando.html"><img src="/uploads/blockpro/300x300/2018-01/300x300_crop_how-to-create-a-flashing-icon_1.jpg" alt="Como criar um ícone piscando"/>Como criar um ícone piscando</a></div><div><a href="/tecnologia/121249-como-configurar-a-página-inicial-do-google.html"><img src="/tema/howhenno/blockpro/noimage.png" alt="Como configurar a página inicial do Google"/>Como configurar a página inicial do Google</a></div><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-3962743005094080" data-ad-slot="3482431748"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></aside><nav id="bsasakugbnptsit"><div class="bsasakugbnptsit"><span id="dle-speedbar"><span itemscope itemtype="https://data-vocabulary.org/Breadcrumb"><a href="https://howhenno.ru/" itemprop="url"><span itemprop="title">howhenno.ru</span></a></span> » <span itemscope itemtype="https://data-vocabulary.org/Breadcrumb"><a href="https://howhenno.ru/tecnologia/" itemprop="url"><span itemprop="title">tecnologia</span></a></span> » Como fazer Texto Fade in CSS</span></div></nav></div><footer> <div class="vtpgevunlni"> <div class="obrkemomh"> <a class="fslvdovgpzhotepopatype" href="/" rel="nofollow">howhenno.ru</a> <div class="rnpevirhpbg"> Copyright © 2021 «HowHenno.ru» </div> </div> <div class="obrkemomh2"> <div class="brifelms"><li><a href="/outro/" rel="nofollow">Outro</a></li><li><a href="/eletrônicos/" rel="nofollow">Eletrônicos</a></li><li><a href="/dia-das-bruxas/" rel="nofollow">dia das Bruxas</a></li><li><a href="/parenting/" rel="nofollow">Parenting</a></li><li><a href="/responsabilidades-de-um-oficial-de-informação-de/" rel="nofollow">Responsabilidades de um Oficial de Informação de G</a></li><li><a href="/posso-obter-cópias-de-textos-enviados-para-outro/" rel="nofollow">Posso obter cópias de textos enviados para outro t</a></li><li><a href="/diferença-entre-rádio-e-tv/" rel="nofollow">Diferença entre Rádio e TV</a></li><li><a href="/como-tirar-um-screenshot-no-iphone/" rel="nofollow">Como tirar um screenshot no iPhone</a></li><li><a href="/melhores-projetos-do-casa-janela/" rel="nofollow">Melhores Projetos do Casa Janela</a></li><li><a href="/artes/" rel="nofollow">Artes</a></li><li><a href="/o-negócio/" rel="nofollow">O negócio</a></li><li><a href="/carreira-trabalho/" rel="nofollow">Carreira & Trabalho</a></li><li><a href="/carros/" rel="nofollow">carros</a></li><li><a href="/trabalhos-manuais/" rel="nofollow">Trabalhos manuais</a></li><li><a href="/pulseiras-de-penas-diy/" rel="nofollow">Pulseiras de penas DIY</a></li></div> <div class="brifelms"><li><a href="/educação/" rel="nofollow">Educação</a></li><li><a href="/moda-estilo-e-cuidados-pessoais/" rel="nofollow">Moda, Estilo e Cuidados Pessoais</a></li><li><a href="/food-drink/" rel="nofollow">Food & Drink</a></li><li><a href="/jardim/" rel="nofollow">Jardim</a></li><li><a href="/saúde/" rel="nofollow">Saúde</a></li><li><a href="/passatempos-jogos-e-brinquedos/" rel="nofollow">Passatempos, jogos e brinquedos</a></li><li><a href="/feriados-e-celebrações/" rel="nofollow">Feriados e Celebrações</a></li><li><a href="/casa/" rel="nofollow">Casa</a></li><li><a href="/festas-entertaining/" rel="nofollow">Festas & Entertaining</a></li><li><a href="/finanças-pessoais/" rel="nofollow">Finanças pessoais</a></li><li><a href="/animais-de-estimação/" rel="nofollow">Animais de estimação</a></li><li><a href="/relacionamentos-e-família/" rel="nofollow">Relacionamentos e Família</a></li><li><a href="/desporto-e-fitness/" rel="nofollow">Desporto e fitness</a></li><li class="active"><a href="/tecnologia/" rel="nofollow">tecnologia</a></li><li><a href="/a-definição-de-aplicações-e-business/" rel="nofollow">A definição de aplicações e-business</a></li><li><a href="/viagem/" rel="nofollow">Viagem</a></li><li><a href="/casamentos/" rel="nofollow">casamentos</a></li><li><a href="/cultura-e-sociedade/" rel="nofollow">Cultura e Sociedade</a></li></div> </div> </div></footer><link media="screen" href="/tema/howhenno/style/styles.css" type="text/css" rel="stylesheet" /><script type="text/javascript">document.write("<a href='https://www.liveinternet.ru/click' target=_blank><img src='//counter.yadro.ru/hit?t43.6;r" + escape(document.referrer) + ((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth)) + ";u" + escape(document.URL) + ";" + Math.random() + "' border=0 width=0 height=0 alt='' title='LiveInternet'><\/a>")</script><script type="text/javascript">function addLink(){var body_element = document.getElementsByTagName('body')[0];var selection = document.getSelection();var pagelink = "<p>Fonte: <a href='"+document.location.href+"'>"+document.location.href+"</a></p>";var copytext = selection+pagelink;var newdiv = document.createElement('div');body_element.appendChild(newdiv);newdiv.innerHTML = copytext;selection.selectAllChildren(newdiv);window.setTimeout(function(){body_element.removeChild(newdiv)},0)}document.oncopy = addLink;</script><script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4f7d7dc43c41fbaa"></script> </body></html>