top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

Pulse Animation using CSS

0 votes
2,891 views

HTML Code 

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

 

 

CSS Code 

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

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
      box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}

Codepan Link

https://codepen.io/anon/pen/xBvKww

 

Hope it helps

posted Mar 28, 2019 by Salil Agrawal

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button


Related Articles

Shake Effect using CSS

HTML Code 

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

 

CSS Code 

.shake {

display: block;

position: fixed;

color: rgb(255, 255, 255);

font-family: proxima-nova, Arial, sans-serif;

font-size: 16px;

cursor: pointer;

padding: 10px;

z-index: 100000001;

bottom: -12px;

right: 50px;

border-radius: 10px;

-webkit-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, .15);

box-shadow: 0 3px 16px 0 rgba(0, 0, 0, .15);

margin-bottom: 26px;

animation: shake 2s cubic-bezier(.36, .07, .19, .97) both;

background:url(https://queryhomebase.appspot.com/images/tech-logo.png) no-repeat;

width:100px;

height:18px;

background-size:contain;

}

.shake:hover {

animation: none;

}

@-webkit-keyframes shake {

10%,

90% {

transform: translate3d(-1px, 0, 0);

}

20%,

80% {

transform: translate3d(2px, 0, 0);

}

30%,

50%,

70% {

transform: translate3d(-4px, 0, 0);

}

40%,

60% {

transform: translate3d(4px, 0, 0);

}

}

@keyframes shake {

10%,

90% {

transform: translate3d(-1px, 0, 0);

}

20%,

80% {

transform: translate3d(2px, 0, 0);

}

30%,

50%,

70% {

transform: translate3d(-4px, 0, 0);

}

40%,

60% {

transform: translate3d(4px, 0, 0);

}

}

 

 

 

Sample Implementation 

https://codepen.io/anon/pen/vPoPER

 READ MORE
...