Efeito de pulsar com CSS

Tutorial ensinando a como criar o efeito de pulsar utilizando CSS 3.

Efeito de pulsar com CSS

 

Exemplo do efeito:

Passe o mouse

Elemento no estado normal:

Normal

Elemento com efeito ativo:

Ativo

CSS utilizado:

Código CSS utilizado para criar o efeito desejado:

@-webkit-keyframes ef-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes ef-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
.ef-pulse-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.ef-pulse-grow:hover, .ef-pulse-grow:focus, .ef-pulse-grow:active {
  -webkit-animation-name: ef-pulse-grow;
  animation-name: ef-pulse-grow;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

Adicione o CSS na folha de estilo do seu projeto / site.

CSS na versão comprimida (tamanho reduzido).

@-webkit-keyframes ef-pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes ef-pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}}.ef-pulse-grow{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent}.ef-pulse-grow:hover,.ef-pulse-grow:focus,.ef-pulse-grow:active{-webkit-animation-name:ef-pulse-grow;animation-name:ef-pulse-grow;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}

Observação: Esse efeito utiliza propriedades modernas do CSS, em navegadores antigos, obsoletos a animação não irá funcionar.

Resumo
Efeito de pulsar utilizando CSS
Nome do Artigo
Efeito de pulsar utilizando CSS
Descrição
Como criar o efeito de pulsar em um elemento HTML utilizando CSS
Autor
Editor
Roger Mauricio Takemiya
Logo do Editor

2 comentários sobre “Efeito de pulsar com CSS

  1. Primeiramente muito obrigado pela informação! Estou tentando utilizar, mas só funciona quando passo o mouse. Como faço para deixar ele pulsando continuamente, como na terceira caixa do exemplo?

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado.