Create a constant pulse animation
2
I'm trying to create a sun with a pulsing animation. However, I'm having trouble with the intervals of the pulse. Two pulses should always be moving with the transition. Also the sun shouldn't be standing without a pulse.
.pulse
margin: 100px;
display: block;
width: 85px;
height: 85px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse 2s infinite;
position: relative;
.pulse::before
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 2.5s infinite;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
.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 40px 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);
@-webkit-keyframes pulse2
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 pulse2
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 60px 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);
<div class="nb-infosys-sun">
<span class="pulse"></span>
</div>html css
edited Nov 13 '18 at 7:10
Nandita Arora Sharma
9,4732618
asked Nov 13 '18 at 6:58
Coder95Coder95
304
add a comment |
2
I'm trying to create a sun with a pulsing animation. However, I'm having trouble with the intervals of the pulse. Two pulses should always be moving with the transition. Also the sun shouldn't be standing without a pulse.
.pulse
margin: 100px;
display: block;
width: 85px;
height: 85px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse 2s infinite;
position: relative;
.pulse::before
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 2.5s infinite;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
.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 40px 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);
@-webkit-keyframes pulse2
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 pulse2
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 60px 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);
<div class="nb-infosys-sun">
<span class="pulse"></span>
</div>html css
edited Nov 13 '18 at 7:10
Nandita Arora Sharma
9,4732618
asked Nov 13 '18 at 6:58
Coder95Coder95
304
I think you need to have 3 elements if you want 2 of them to always be visible. Then you can adjust timings, so that whenever 1st one reaches the vanishing point, 3rd one starts out.
– Mohit Bhardwaj
Nov 13 '18 at 7:15
Do you only need help with the transition of the pulse as shown in the example above? i mean the example shown resembles more with a location pointer rather than the sun
– Ambrish Pathak
Nov 13 '18 at 7:19
Have one more element &::after and just add an animation delay to 2 elements.
– sridhar reddy
Nov 13 '18 at 7:23
add a comment |
2
2
2
I'm trying to create a sun with a pulsing animation. However, I'm having trouble with the intervals of the pulse. Two pulses should always be moving with the transition. Also the sun shouldn't be standing without a pulse.
.pulse
margin: 100px;
display: block;
width: 85px;
height: 85px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse 2s infinite;
position: relative;
.pulse::before
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 2.5s infinite;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
.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 40px 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);
@-webkit-keyframes pulse2
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 pulse2
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 60px 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);
<div class="nb-infosys-sun">
<span class="pulse"></span>
</div>html css
edited Nov 13 '18 at 7:10
Nandita Arora Sharma
9,4732618
asked Nov 13 '18 at 6:58
Coder95Coder95
304
I'm trying to create a sun with a pulsing animation. However, I'm having trouble with the intervals of the pulse. Two pulses should always be moving with the transition. Also the sun shouldn't be standing without a pulse.
.pulse
margin: 100px;
display: block;
width: 85px;
height: 85px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse 2s infinite;
position: relative;
.pulse::before
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 2.5s infinite;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
.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 40px 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);
@-webkit-keyframes pulse2
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 pulse2
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 60px 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);
<div class="nb-infosys-sun">
<span class="pulse"></span>
</div>.pulse
margin: 100px;
display: block;
width: 85px;
height: 85px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse 2s infinite;
position: relative;
.pulse::before
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 2.5s infinite;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
.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 40px 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);
@-webkit-keyframes pulse2
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 pulse2
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 60px 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);
<div class="nb-infosys-sun">
<span class="pulse"></span>
</div>.pulse
margin: 100px;
display: block;
width: 85px;
height: 85px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse 2s infinite;
position: relative;
.pulse::before
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 2.5s infinite;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
.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 40px 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);
@-webkit-keyframes pulse2
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 pulse2
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 60px 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);
<div class="nb-infosys-sun">
<span class="pulse"></span>
</div>html css
html css
edited Nov 13 '18 at 7:10
Nandita Arora Sharma
9,4732618
asked Nov 13 '18 at 6:58
Coder95Coder95
304
edited Nov 13 '18 at 7:10
Nandita Arora Sharma
9,4732618
asked Nov 13 '18 at 6:58
Coder95Coder95
304
edited Nov 13 '18 at 7:10
Nandita Arora Sharma
9,4732618
edited Nov 13 '18 at 7:10
Nandita Arora Sharma
9,4732618
edited Nov 13 '18 at 7:10
Nandita Arora Sharma
9,4732618
9,4732618
asked Nov 13 '18 at 6:58
Coder95Coder95
304
asked Nov 13 '18 at 6:58
Coder95Coder95
304
asked Nov 13 '18 at 6:58
Coder95Coder95
304
304
I think you need to have 3 elements if you want 2 of them to always be visible. Then you can adjust timings, so that whenever 1st one reaches the vanishing point, 3rd one starts out.
– Mohit Bhardwaj
Nov 13 '18 at 7:15
Do you only need help with the transition of the pulse as shown in the example above? i mean the example shown resembles more with a location pointer rather than the sun
– Ambrish Pathak
Nov 13 '18 at 7:19
Have one more element &::after and just add an animation delay to 2 elements.
– sridhar reddy
Nov 13 '18 at 7:23
add a comment |
I think you need to have 3 elements if you want 2 of them to always be visible. Then you can adjust timings, so that whenever 1st one reaches the vanishing point, 3rd one starts out.
– Mohit Bhardwaj
Nov 13 '18 at 7:15
Do you only need help with the transition of the pulse as shown in the example above? i mean the example shown resembles more with a location pointer rather than the sun
– Ambrish Pathak
Nov 13 '18 at 7:19
Have one more element &::after and just add an animation delay to 2 elements.
– sridhar reddy
Nov 13 '18 at 7:23
I think you need to have 3 elements if you want 2 of them to always be visible. Then you can adjust timings, so that whenever 1st one reaches the vanishing point, 3rd one starts out.
– Mohit Bhardwaj
Nov 13 '18 at 7:15
I think you need to have 3 elements if you want 2 of them to always be visible. Then you can adjust timings, so that whenever 1st one reaches the vanishing point, 3rd one starts out.
– Mohit Bhardwaj
Nov 13 '18 at 7:15
Do you only need help with the transition of the pulse as shown in the example above? i mean the example shown resembles more with a location pointer rather than the sun
– Ambrish Pathak
Nov 13 '18 at 7:19
Do you only need help with the transition of the pulse as shown in the example above? i mean the example shown resembles more with a location pointer rather than the sun
– Ambrish Pathak
Nov 13 '18 at 7:19
Have one more element &::after and just add an animation delay to 2 elements.
– sridhar reddy
Nov 13 '18 at 7:23
Have one more element &::after and just add an animation delay to 2 elements.
– sridhar reddy
Nov 13 '18 at 7:23
add a comment |
2 Answers
2
active
oldest
votes
0
This is what I got after adding animation-delay:
.pulse::before
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 1s infinite;
animation-delay: 0.5s;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
Here is the JSFiddle demo
answered Nov 13 '18 at 7:27
Ahs NAhs N
7,05711528
add a comment |
0
You can add some animation delay to adjust timing of both pulse as below snippet
.pulse
margin: 100px;
display: block;
width: 85px;
height: 85px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse 2s linear infinite both;
position: relative;
.pulse::before
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 2s linear 1s infinite both;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
.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 40px 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);
@-webkit-keyframes pulse2
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 pulse2
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 60px 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);
<div class="nb-infosys-sun">
<span class="pulse"></span>
</div>answered Nov 13 '18 at 7:59
NidhiNidhi
1,1311316
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53275447%2fcreate-a-constant-pulse-animation%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
This is what I got after adding animation-delay:
.pulse::before
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 1s infinite;
animation-delay: 0.5s;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
Here is the JSFiddle demo
answered Nov 13 '18 at 7:27
Ahs NAhs N
7,05711528
add a comment |
0
This is what I got after adding animation-delay:
.pulse::before
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 1s infinite;
animation-delay: 0.5s;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
Here is the JSFiddle demo
answered Nov 13 '18 at 7:27
Ahs NAhs N
7,05711528
add a comment |
0
0
0
This is what I got after adding animation-delay:
.pulse::before
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 1s infinite;
animation-delay: 0.5s;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
Here is the JSFiddle demo
answered Nov 13 '18 at 7:27
Ahs NAhs N
7,05711528
This is what I got after adding animation-delay:
.pulse::before
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 1s infinite;
animation-delay: 0.5s;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
Here is the JSFiddle demo
answered Nov 13 '18 at 7:27
Ahs NAhs N
7,05711528
answered Nov 13 '18 at 7:27
Ahs NAhs N
7,05711528
answered Nov 13 '18 at 7:27
Ahs NAhs N
7,05711528
answered Nov 13 '18 at 7:27
Ahs NAhs N
7,05711528
7,05711528
add a comment |
add a comment |
0
You can add some animation delay to adjust timing of both pulse as below snippet
.pulse
margin: 100px;
display: block;
width: 85px;
height: 85px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse 2s linear infinite both;
position: relative;
.pulse::before
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 2s linear 1s infinite both;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
.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 40px 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);
@-webkit-keyframes pulse2
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 pulse2
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 60px 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);
<div class="nb-infosys-sun">
<span class="pulse"></span>
</div>answered Nov 13 '18 at 7:59
NidhiNidhi
1,1311316
add a comment |
0
You can add some animation delay to adjust timing of both pulse as below snippet
.pulse
margin: 100px;
display: block;
width: 85px;
height: 85px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse 2s linear infinite both;
position: relative;
.pulse::before
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 2s linear 1s infinite both;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
.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 40px 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);
@-webkit-keyframes pulse2
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 pulse2
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 60px 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);
<div class="nb-infosys-sun">
<span class="pulse"></span>
</div>answered Nov 13 '18 at 7:59
NidhiNidhi
1,1311316
add a comment |
0
0
0
You can add some animation delay to adjust timing of both pulse as below snippet
.pulse
margin: 100px;
display: block;
width: 85px;
height: 85px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse 2s linear infinite both;
position: relative;
.pulse::before
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 2s linear 1s infinite both;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
.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 40px 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);
@-webkit-keyframes pulse2
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 pulse2
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 60px 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);
<div class="nb-infosys-sun">
<span class="pulse"></span>
</div>answered Nov 13 '18 at 7:59
NidhiNidhi
1,1311316
You can add some animation delay to adjust timing of both pulse as below snippet
.pulse
margin: 100px;
display: block;
width: 85px;
height: 85px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse 2s linear infinite both;
position: relative;
.pulse::before
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 2s linear 1s infinite both;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
.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 40px 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);
@-webkit-keyframes pulse2
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 pulse2
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 60px 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);
<div class="nb-infosys-sun">
<span class="pulse"></span>
</div>.pulse
margin: 100px;
display: block;
width: 85px;
height: 85px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse 2s linear infinite both;
position: relative;
.pulse::before
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 2s linear 1s infinite both;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
.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 40px 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);
@-webkit-keyframes pulse2
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 pulse2
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 60px 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);
<div class="nb-infosys-sun">
<span class="pulse"></span>
</div>.pulse
margin: 100px;
display: block;
width: 85px;
height: 85px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse 2s linear infinite both;
position: relative;
.pulse::before
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 2s linear 1s infinite both;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
.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 40px 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);
@-webkit-keyframes pulse2
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 pulse2
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 60px 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);
<div class="nb-infosys-sun">
<span class="pulse"></span>
</div>answered Nov 13 '18 at 7:59
NidhiNidhi
1,1311316
answered Nov 13 '18 at 7:59
NidhiNidhi
1,1311316
answered Nov 13 '18 at 7:59
NidhiNidhi
1,1311316
answered Nov 13 '18 at 7:59
NidhiNidhi
1,1311316
1,1311316
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53275447%2fcreate-a-constant-pulse-animation%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I think you need to have 3 elements if you want 2 of them to always be visible. Then you can adjust timings, so that whenever 1st one reaches the vanishing point, 3rd one starts out.
– Mohit Bhardwaj
Nov 13 '18 at 7:15
Do you only need help with the transition of the pulse as shown in the example above? i mean the example shown resembles more with a location pointer rather than the sun
– Ambrish Pathak
Nov 13 '18 at 7:19
Have one more element &::after and just add an animation delay to 2 elements.
– sridhar reddy
Nov 13 '18 at 7:23