Image animation with Pulse effect and css brightness

Asked

Viewed 6,791 times

1

It is only possible with css to make an image pulsate and pass a glowing effect?

css3 css-animations

  • Yes of course it’s possible...

  • There’s an example of what the glow effect would look like?

  • Have you ever tried to do anything? Post what you got so far.

1 answer

3

Modifying a little the example of the miguel it is possible to obtain the following result...

.pulse {
  animation: pulse 0.7s infinite;
  margin: 0 auto;
  display: table;
  margin-top: 50px;
  animation-direction: alternate;
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -webkit-filter: brightness(100%);
  }
  100% {
    -webkit-transform: scale(1.1);
    -webkit-filter: brightness(200%);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    filter: brightness(100%);
  }
  100% {
    transform: scale(1.1);
    filter: brightness(200%);
  }
}
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQORaH2BF3ZzUy2ATj866BszLShnoe2cRbjc-WQauazk5iThjC-4w" class="pulse">

Unfortunately filter support is still low for browsers, if your target is IE, do not recommend using.

  • 1

    Good job Felipe

  • In addition to "unfortunately the filter support is still low", see Can I use?

Browser other questions tagged css3 css-animations

You are not signed in. Login or sign up in order to post.