Why does input checked persist across page reloads?

Question

css

Good afternoon!

Faced such a problem.
There is an <*input type="checkbox"*> tag

When the user checks an element (i.e. the element becomes checked) the style is applied:

input:checked{
animation:st 1.1s ease-in 0.5s both;}

@keyframes st{from {opacity:1;}to{opacity:0;display:none;}}

In Firefox 70.0.1 and IE11 at least, the element is checked by default on page reload, causing it to animate (disappear) without user interaction.

Those. if the user checked the checkbox - the checkbox disappeared - reloaded the page - the checkbox appeared checked and disappeared.

This does not happen in Chrome and Opera.

Can anyone explain why this is happening and what can be done?

Answer 1

If they tried to check it on a clean page without animations, scripts and other things, well, in a clean browser without settings and extensions, they would know that this is standard behavior.
If you need the checkbox to be reset when the page is reloaded, then you have chosen the wrong html element. If you need a checkbox just for the visual, it's better to use button.