CODEWITHSUNDEEP
csscss-animationslinear-gradients
Lance Pollard
Lance Pollard

Reputation: 79458

How to animate a ripple effect of a gradient flowing across a background image in CSS

Not quite a pulse animation -- but somewhat similar (not radial, but linear) -- I am trying to create the effect of sort of a lens flare if you turn a piece of glass and see a band of light swipe across it, in CSS. So say you have a regular background image, or a seamless repeating background image, in CSS. Now you want to animate across that image a rectangular band of light that is sort of a "fade-in ... full light ... fade-out" gradient of white light. So you have a linear-gradient sort of like transparent, semi-transparent-white, white, semi-transparent-white, transparent that flows across the background image (seamless/repeating background image, or regular background image), repeatedly flowing across like it was a pool of water in constant motion.

Wondering if this sort of thing is possible in CSS, and how to do it.

Maybe it is simply an animated linear-gradient mask (which I am not familiar with but have heard of). Not sure.

Basically animating a semitransparent linear gradient like this (just the line part, and imagine it was a simple rectangle).

enter image description here

Upvotes: 3

Views: 2623

Answers (2)

Temani Afif
Temani Afif

Reputation: 273990

Are you looking for something like below:

body {
  margin:0;
  height:100vh;
  background:
    linear-gradient(to right,transparent 33%,white,transparent 66%),
    url(https://picsum.photos/id/10/800/800) center;
  background-size:300% 100%,cover;
  animation:change 2s linear infinite;
}

@keyframes change {
  from { /*Use "to" to change the direction */
    background-position:right,center;
  }
}

html {
 background:#fff;
}

Related to get more details about the calculation:Using percentage values with background-position on a linear gradient

Upvotes: 5

Gacci
Gacci

Reputation: 1398

NOt sure if this is what you are looking for. Here it is a shot!

.ripple{
  width: 50px;
  height: 50px;
  display: block;
  position: relative;
  
  background-color: #00ccff;
  
  border-radius: 100%;
  
  opacity: 0.5;
}
.ripple:before, .ripple:after{
  content: '\0020';
  
  width: 0;
  height: 0;
  
  position: absolute;
  top: 50%;
  left: 50%;
  
  border-radius: 100%;
  border: 2px solid #0088ee;
  
  transform: translate(-50%, -50%);
}

.ripple:before{
    animation: ripple-one 2.5s infinite;
}
.ripple:after{
    animation: ripple-one 3.5s infinite;
}

@keyframes ripple-one{
  0%{
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}


@keyframes ripple-two{
  0%{
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}
<label class="ripple"></label>

Upvotes: 2

Related Questions