Jump to content
Sign in to follow this  
guidezin

Repetir animação em css

Recommended Posts

Boa tarde.


Estou com um pequeno problema na animation do css.


Estou utilizando 3 keyframes diferentes para fazer uma animação, entretanto quando acabar esses 3 keyframes gostaria de repeti-los exatamente na mesma ordem. Se coloco a propriedade a animation-iteration-count como infinite ele fica completamente louco.



Veja o exemplo no link: https://jsfiddle.net/4pnquy2p/1/



Deixo meu obrigado desde já! :)



Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By vinihhylian0103
      Olá, Boa Noite.
      Estou usando o Iframe pra exibir meu form de login na minha página central, porém, quando eu clico no botão login, o profile parece somente no iframe, teria como eu fazer o profile ser redirecionado  na página principal.
       
      Segue o código:
        <div class="modal fade" id="modalLRFormDemo2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="modal-dialog cascading-modal" role="document">       <!--Content-->       <div class="modal-content">                            <iframe marginwidth="50" height="500px" width="500px" src="CADASTROS_LOGINS\LOGIN\index.html"> Seu navegador não suporta frames )= </iframe>                 <center><button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Fechar</button></center>                 <br>               </div>             </div>             <!--/.Panel 8-->           </div>         </div>       </div>  
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) { $vativochk = "checked"; } else { $vativochk = ""; } echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo '</tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
       
      function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

    • By Pitag346
      Olá pessoal, tudo bem? 
      Estou com uma dúvida bem bobinha... mas gostaria que me ajudassem a solucionar.
       
      Alguns sites utilizam uma forma de carregar as imagens deixando elas embaçadas/desfocadas. Até que são carregadas e elas aparecerem normalmente...
       
      Exemplo básico seria esse site: https://www.redbull.com/br-pt/athletes
       
      Sabem me explicar como isso é feito, e pra que ? Meu site usa bastante imagens, gostaria de saber se tem algum benefício ou se seria somente estética ... Obrigado! 
       
      (Não sei se isso é feito em JavaScript, acredito que sim... perdão se publiquei na área errada).
    • By danicarla
      Bom dia pessoal,

      Quero fazer um link com o titulo de uma cor e o texto em outra, mas quando passar o mouse em cima queria que a cor dos dois ficasse igual
      Meu codigo está assim:
      <style type="text/css"> a.ChamadaNoticias:link{text-decoration:none;} a.ChamadaNoticias:visited{text-decoration:none;} a.ChamadaNoticias:hover{color: #00FF05;text-decoration:underline;} .tituloA{font-family:'Open Sans', sans-serif;color:#00698C;font-size:16px;font-weight:bold;} .textoB{font-family:'Open Sans', sans-serif;color:#333;font-size:16px;} </style> <a href="#" class="ChamadaNoticias"> <div class="tituloA">Titulo da noticia</div> <div class="textoB">Aqui vai uma breve descrição da noticia</div> </a> Como preciso fazer com meu CSS para quando passar o mouse em cima mudar a cor do titulo e do texto para mesma cor?
    • By ThosuZ
      Olá, pessoal. Tudo bom? Estou com um problema aqui. Criei uns links em um site pra levarem pra uma galeria, são imagens que estão lado a lado, cada uma com a imagem principal de cada galeria. O problema é: eu criei elas como background de li's de uma ul. Coloquei um <span> dentro da tag <li> pra poder aparecer o nome da galeria quando passar o mouse por cima. Observem o código:
       
      HTML:
       
      <ul id="artefotos">                 <a href="lorena.html" target="_self" class="glink"><li id="ft01"><span>Lorena Frazzão</span></li></a>                 <a href="vivian.html" target="_self" class="glink"><li id="ft02"><span>Vivian Nadine</span></li></a>                 <a href="paula.html" target="_self" class="glink"><li id="ft03"><span>Paula Bernardes</span></li></a>                 <a href="anaclara.html" target="_self" class="glink"><li id="ft04"><span>Ana Clara</span></li></a>                 <a href="marcus.html" target="_self" class="glink"><li id="ft05"><span>Marcus Visasi</span></li></a>                 <a href="davi.html" target="_self" class="glink"><li id="ft06"><span>Davi Serrano</span></li></a>                 <a href="rafaejr.html" target="_self" class="glink"><li id="ft07"><span>Rafaela & Jr</span></li></a>             </ul>  
      CSS:
       
      ul#artefotos li span {     font-size: 15pt;     text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);     line-height: 1120px;     padding: 10px;     opacity: 0;     transition: 0.5s; }   ul#artefotos li:hover span {     opacity: 1;     background-color: rgba(0, 0, 0, 0.5); }   a.glink {     color: #fff; }   ul#artefotos {     width: 1470px;     margin: 0 auto;     margin-top: -20px;     padding: 25px;     overflow: hidden;     list-style: none; }   ul#artefotos li {     float: left;     width: 200px;     height: 600px;     margin: 5px;     background-color: #363636;     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); }   ul#artefotos li#ft01 {     background: url('../_images/_essays/_lorena/IMG_2651.jpg') no-repeat;     background-position: 50% 50%;     background-size: 400px; }   ul#artefotos li#ft01:hover {     background: url('../_images/_essays/_lorena/IMG_2651.jpg') no-repeat;     background-position: 50% 50%;     background-size: 400px;     filter: opacity(25%); }  
      Porém, na última seção do CSS, eu coloquei um :hover pra quando passar o mouse, o fundo ficar menos opaco e a tipografia mais legível. Mas a tipografia também ficou menos opaca, já tentei colocar esse :hover no span como background: rgba(0,0,0,0.5); mas também não deu certo, porque ele fica apenas um retângulo em volta dele.
       
      Alguém sabe como resolver pra deixar toda a imagem menos opaca e a tipografia normal quando passar o mouse?
       
      Valeu!

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.