CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 73

Targeting a specific image for animation

I used CSS flashing property to animate a specific image and there are several sources online in this regard, but none of them are talking on how to target a specific image in the HTML page. I have several images linked in my HTML page and I just want one of the images to blink/flash not all of them. I used below code and now all of my images are blinking. I tried a lot to paste/write my css code here, but it looks like the system is not allowing me because the of the formatting, while I don't see any issue with my code format.

@keyframe blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } 
flashing-effect img { animation: blink 1s; animation-iteration-count: infinite; }

Upvotes: 0

Views: 210

Answers (1)

Itay Ganor
Itay Ganor

Reputation: 4205

All you need to do is add a class name to the image you wish to be blinking.

Such as:

<img src="..." class="flashing-image"/>

Then, in your CSS, target it appropriately:

.flashing-image {
    animation: blink 1s infinite;
}

Upvotes: 1

Related Questions