/* floating element*/
.floating-btn {
animation: floating-btn 2s ease-in-out forwards;
animation-iteration-count: infinite;
}
@-webkit-keyframes floating-btn {
50% {
-webkit-transform: scale(0.95) translateY(-20%);
transform: scale(0.95) translateY(-20%);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes floating-btn {
50% {
-webkit-transform: scale(0.95) translateY(-20%);
transform: scale(0.95) translateY(-20%);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
/*pulse and bounce animation*/
.pulse {
margin:0px;
display: block;
width: 10%;
height: auto;
border-radius: 50%;
background: white;
cursor: pointer;
box-shadow: 0 0 0 rgba(204,169,44, 0.7);
animation: pulse 2s ease-in-out infinite;
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(8,69,122, 0.7);
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
70% {
-webkit-box-shadow: 0 0 0 30px rgba(8,69,122, 0);
-webkit-transform: scale(0.95) translateY(-20%);
transform: scale(0.95) translateY(-20%);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(8,69,122, 0);
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(8,69,122, 0.7);
box-shadow: 0 0 0 0 rgba(8,69,122, 0.4);
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
70% {
-moz-box-shadow: 0 0 0 30px rgba(8,69,122, 0);
box-shadow: 0 0 0 30px rgba(8,69,122, 0);
-webkit-transform: scale(0.95) translateY(-20%);
transform: scale(0.95) translateY(-20%);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(8,69,122, 0);
box-shadow: 0 0 0 0 rgba(8,69,122, 0);
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
}
.pulseback {
margin:0px;
display: block;
width: 30%;
height: auto;
border-radius: 50%;
background: #f9e91a;
cursor: pointer;
box-shadow: 0 0 0 rgba(204,169,44, 0.7);
animation: pulseback 2s ease-in-out infinite;
}
@-webkit-keyframes pulseback {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(8,69,122, 0.7);
-webkit-transform: translateY(-20%);
transform: translateY(-20%);
}
70% {
-webkit-box-shadow: 0 0 0 30px rgba(8,69,122, 0);
-webkit-transform: scale(0.95) translateY(-10%);
transform: scale(0.95) translateY(-10%);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(8,69,122, 0);
-webkit-transform: translateY(-20%);
transform: translateY(-2%);
}
}
@keyframes pulseback {
0% {
-moz-box-shadow: 0 0 0 0 rgba(8,69,122, 0.7);
box-shadow: 0 0 0 0 rgba(8,69,122, 0.4);
-webkit-transform: translateY(-20%);
transform: translateY(-20%);
}
70% {
-moz-box-shadow: 0 0 0 30px rgba(8,69,122, 0);
box-shadow: 0 0 0 30px rgba(249, 233, 26, 0);
-webkit-transform: scale(0.95) translateY(-10%);
transform: scale(0.95) translateY(-10%);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(8,69,122, 0);
box-shadow: 0 0 0 0 rgba(8,69,122, 0);
-webkit-transform: translateY(-20%);
transform: translateY(-20%);
}
}
floating-btn + pulse
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.