top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration Why to Join

    Get Free Article Updates

Facebook Login
Site Registration

Pulse Animation using CSS

0 votes
148 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 by Salil Agrawal

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


Related Articles

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
Contact Us
+91 9880187415
sales@queryhome.net
support@queryhome.net
#280, 3rd floor, 5th Main
6th Sector, HSR Layout
Bangalore-560102
Karnataka INDIA.
QUERY HOME
...