Is there a CSS property that sets the duration of another CSS property (not a transition from one state to another, namely, duration), for example, if there is an erroneous validation, the red frame should be lit for 5 seconds

<style> input:valid:not([type="submit"]) { border:2px solid green; } .a:invalid:not(:focus):not(:placeholder-shown) { border:2px solid red; transition:2s; } </style> <form onsubmit="go(); return false"> <span>введите имя</span><input class="a" placeholder=" " id="name" type="text" required pattern="[А-Яа-яЁё]{5,15}"><br> <span>введите фамилию</span><input class="a" placeholder=" " id="surname" type="text" required pattern="[А-Яа-яЁё]{5,15}"><br> <input type="submit" value="сохранить" > </form>
  • Why not solve this problem by a smooth transition? If an event trigger occurs, the frame goes into a pseudo-class, which in turn has the opposite effect, which is applied after 5 seconds. - Georgy Potapov
  • and how to translate the frame into a pseudo class? please explain, because I don’t know such things even by mime - Roman Romashko
  • .a:invalid {transition:color .5s, color .5s;} It seems to be possible, but I'm not sure, but there is no time to check now. In general, you can set a few transitions, I think this is what you need. Read more, read here - Georgy Potapov

2 answers 2

You can solve your problem using CSS animations. Read more: https://www.w3schools.com/css/css3_animations.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

  • thanks for the answer, thanks for the link, in it I found the answer to my question - Roman Romashko

If you need to specify the duration of the transition, you must use

 transition-duration: 2s;

If several animations that require different durations are used at the same time, they should be listed separated by commas.