Animation of image with pulse effect and brightness in css

Question

Animation of image with pulse effect and brightness in css

Navigation

#1 by (2 votes)

1

Is it possible only with css to make an image pulsing and passing an effect with brightness?

css3 css-animations

asked by anonymous 26.01.2018 / 18:34

1 answer

Error in inflating menu in navigation drawer in Nougat and Oreo version On large scrapes how to avoid ConnectionError?

score 2 · Answer 1

By modifying the miguel example a little, you can get 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 the support for filters is still low for browsers, if your target is IE, I do not recommend using it.