I'm making a website and I want to make a guide with pulse animation. There are 3 tags that I want to use. For example three <a> links, I want:
I think it may be possible with javascript but I dont know how.
For example:
#live-heart{
animation:pulse 1500ms infinite ;
border-radius:20px;
}
@keyframes pulse{
0% {
box-shadow:#f33 0 0 0 0;
}
75%{
box-shadow:rgba(65, 30, 30, 0.8) 0 0 0 16px
}
}
#live-heart2{
animation:pulse 1500ms infinite ;
border-radius:20px;
}
@keyframes pulse{
0% {
box-shadow:#f33 0 0 0 0;
}
75%{
box-shadow:rgba(65, 30, 30, 0.8) 0 0 0 16px
}
}
#live-heart3{
animation:pulse 1500ms infinite ;
border-radius:20px;
}
@keyframes pulse{
0% {
box-shadow:#f33 0 0 0 0;
}
75%{
box-shadow:rgba(65, 30, 30, 0.8) 0 0 0 16px
}
} <a href="#" id="live-heart2">first one</a>
<p>
When a user clicked on "first one" its css shoul be disabled and a second one that I linked in paragraph be enabled <a href="#" id="live-heart">second one</a>
and when a user clicked on second one, its css be disabled and the third one be activeted
example text: bla bla bla bla
</p>
<a href="#" id="live-heart3">third one</a>basically all you need is to having a state holding the active pulsing link index. and by clicking it, increase the index by one.
something like that:
const [isPulsingIndex, setIsPulsingIndex] = useState(0);
<Link className={isPulsing.index === 0 ? 'pulsing' : ''}
onClick={() => setIsPulsingIndex(1)}>
Link 1
</Link>
<Link className={isPulsing.index === 1 ? 'pulsing' : ''}
onClick={() => setIsPulsingIndex(2)}>
Link 1
</Link>
<Link className={isPulsing.index === 2 ? 'pulsing' : ''}
onClick={() => setIsPulsingIndex(3)}>
Link 1
</Link>quick example of how adding and removing class from a tag dynamically using state