Efeito de pulsar com CSS

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

Exemplo do efeito:

Elemento no estado normal:

Elemento com efeito 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

Nome do Artigo

Efeito de pulsar utilizando CSS

Descrição

Como criar o efeito de pulsar em um elemento HTML utilizando CSS

Autor

Roger Mauricio Takemiya

Editor

Roger Mauricio Takemiya

Logo do Editor