How to make CSS3 animated banner show animation only once?

Question

css

Good afternoon, ladies and gentlemen!

1. There is an example banner at tympanus.net/Tutorials/AnimatedWebBanners/
2. Animation is triggered on every page refresh

How can I make this animated banner (in CSS3) only animate once for the user when visiting the first page of the site? Those. at subsequent transitions through the pages of the site, the banner should remain in the final position of the animation.

Sorry if I sounded rude :-)

Answer 1

If this is the first visit (no cookie is set), then on the server or using JS, add the “first-visit” class to the BODY or banner. And in styles, apply animation only to the “first-visit” heir

Answer 2

When you first visit the page write cookies that the animated banner is shown. Check the presence/value of this cookie on other pages. And if necessary, just show the picture with the end position of the animation.

Answer 3

You can also try with local storage .