How to make an animation in CSS with drag effect. Motion blur

Navigation
9

I'm trying to put an animated% css in CSS with loader on a page, but I'd like to put a "drag effect" on it as if it blurred a "blur" in> following the element when it moves ...

Type this image

ButI'veonlybeenabletogethere...Anyonehaveanytipsorknowatechniquehowtogetsomethingsimilartothis?

.box {
  position: absolute;
  left: 50%;
  width: 400px;
  height: 200px;
  margin-left: -200px;
  overflow: hidden;
  background: #333;
}

.bola {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 75px;
  left: 175px;
  background: #999;
  border-radius: 50%;
  -webkit-animation: bolax 2s ease-in-out infinite;
          animation: bolax 2s ease-in-out infinite;
}

@keyframes bolax {
  0%, 100% {
    -webkit-transform: translateX(-150px);
            transform: translateX(-150px);
  }
  50% {
    -webkit-transform: translateX(150px);
            transform: translateX(150px);
  }
}
<div class="box">
  <div class="bola">
  </div>
</div>
    
asked by anonymous 25.10.2018 / 15:48

2 answers

11

The "quickest" way to adapt your code is to add a "shadow backwards".

The colors are a gradient between the front and the bottom: 

27% {box-shadow:-10px 0 0 #999,-20px 0 0 #777,-30px 0 0 #666,-40px 0 0 #555,-50px 0 0 #444}
77% {box-shadow:10px 0 0 #999,20px 0 0 #777,30px 0 0 #666,40px 0 0 #555,50px 0 0 #444}

In this case, I pre-calculated the colors going from # 999 to # 444, but if you want to do it independent of the background, change by RGBA( cor do objeto, transparencia ) , making each shadow more transparent.

Applying to your code: 

.box {
  position: absolute;
  left: 50%;
  width: 400px;
  height: 200px;
  margin-left: -200px;
  overflow: hidden;
  background: #333;
}

.bola {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 75px;
  left: 175px;
  background: #ccc;
  border-radius: 50%;
  -webkit-animation: bolax 2s ease-in-out infinite;
          animation: bolax 2s ease-in-out infinite;
}

@keyframes bolax {
  0%, 100% {
    -webkit-transform: translateX(-150px);
            transform: translateX(-150px);
  }
  27% {box-shadow:
    -10px 0 0 #999,
    -20px 0 0 #777,
    -30px 0 0 #666,
    -40px 0 0 #555,
    -50px 0 0 #444;
  }
  50% {
    -webkit-transform: translateX(150px);
            transform: translateX(150px);
    }
  77% {box-shadow:
    10px 0 0 #999,
    20px 0 0 #777,
    30px 0 0 #666,
    40px 0 0 #555,
    50px 0 0 #444;
  }  }
}
<div class="box">
  <div class="bola">
  </div>
</div>
    
26.10.2018 / 15:21
11

You can create other balls to be "blur" and only change animation-delay and opacity .

The code below is the same as yours, just added the elements .blurN and created the rules for these specific elements. 

.box {
  position: absolute;
  left: 50%;
  width: 400px;
  height: 200px;
  margin-left: -200px;
  overflow: hidden;
  background: #333;
}

.bola {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 75px;
  left: 175px;
  background: #999;
  border-radius: 50%;
  -webkit-animation: bolax 2s ease-in-out infinite;
          animation: bolax 2s ease-in-out infinite;
}

.blur1 {
  animation-delay: 20ms;
  opacity: 0.5;
}

.blur2 {
  animation-delay: 40ms;
  opacity: 0.4;
}

.blur3 {
  animation-delay: 60ms;
  opacity: 0.3;
}

.blur4 {
  animation-delay: 80ms;
  opacity: 0.2;
}


@keyframes bolax {
  0%, 100% {
    -webkit-transform: translateX(-150px);
            transform: translateX(-150px);
  }
  50% {
    -webkit-transform: translateX(150px);
            transform: translateX(150px);
  }
}
<div class="box">
  <div class="bola"></div>
  <div class="bola blur1"></div>
  <div class="bola blur2"></div>
  <div class="bola blur3"></div>
  <div class="bola blur4"></div>
</div>
    
26.10.2018 / 15:42
Set OPTION as SELECTED based on database values How to count how many times a value appears in a table