CODEWITHSUNDEEP
cssanimationcss-transitionsbox-shadow
Filth
Filth

Reputation: 3228

CSS3 Tranisition Box Shadow Pulse

I'm trying to ensure that only the box shadow has the pulsate and not the whole button.

The experience should see the button solid but with the box shadow fading in and out if that makes sense.

Here is my code:

.gps_ring {
    border: 3px solid #999;
    -webkit-border-radius: 30px;
    height: 42px;
    width: 180px;
    background-color: blue;
    text-align: center;
    display: block;
    color: white;
    box-shadow: 0 0 17px black;
  -moz-box-shadow: 0 0 17px black;
  -webkit-box-shadow: 0 0 17px black;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.0
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

EXAMPLE

Upvotes: 3

Views: 11186

Answers (3)

Sumith Harshan
Sumith Harshan

Reputation: 6445

HTML

<span class="pulse"></span>

CSS

.pulse {
  margin:80px;
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #cca92c;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(0,0,0, 0.4);
  animation: none;
}
.pulse:hover {
  animation: pulse 2s infinite;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0,0,0, 0.5);
  }
  70% {
      -webkit-box-shadow: 0 0 0 50px rgba(0,0,0, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0,0,0, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0.5);
    box-shadow: 0 0 0 0 rgba(0,0,0, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 50px rgba(0,0,0, 0);
      box-shadow: 0 0 0 50px rgba(0,0,0, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0);
      box-shadow: 0 0 0 0 rgba(0,0,0, 0);
  }
}

Hover effect. CodePen: https://codepen.io/smith-harshan/pen/MWpGXeY

Hope this would be a help.

Upvotes: 0

Asons
Asons

Reputation: 87201

Simply animate only the shadow, like this

.gps_ring {
    border: 3px solid #999;
    border-radius: 30px;
    height: 42px;
    width: 180px;
    background-color: blue;
    text-align: center;
    display: block;
    color: white;
    box-shadow: 0 0 17px black;
    animation: pulsate 1s ease-out infinite;
}
@-webkit-keyframes pulsate {
    0%   { box-shadow: 0 0 0 black; }
    50%  { box-shadow: 0 0 17px black; }
    100% { box-shadow: 0 0 0 black; }
}
<div id="state" class="grid_4 alpha">
  <a href="#" class="gps_ring">Touch me</a>
</div>

Upvotes: 3

Krešimir Galić
Krešimir Galić

Reputation: 311

I think this is what you need. Better solution http://codepen.io/governorfancypants/pen/zvMxWm

<div class="circle">
  <div class="inner-circle"></div>
  <div class="cover-circle"></div>
</div>


.pulsating-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 30px;
  height: 30px;

  &:before {
    content: '';
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 45px;
    background-color: #01a4e9;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }

  &:after {
    content: '';
    position: absolute;
    left: 0; 
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

@keyframes pulse-dot {
  0% {
    transform: scale(.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(.8);
  }
}

Upvotes: 0

Related Questions