Survey form need help!

HTML-CSS
1

In this survey form project, I want to add a popup saying “thank you” when the user fills the form and clicks the submit button (you are allowed to submit if you have checked agree and filled name, email, and postal code field ). PopUp should slide from top and stop in the middle of the page and remain there.

I have added pop-up using keyframe animations and a little javascript. Pop-up sits at the top in the<body> and initially its is display:none. When submit button is clicked pop display gets display:block and animation class .pop-up-animation is added to the pop-up using javascript.

The problem I am facing is that animation happens, however it does not retain its state when the animation ends. I have tried using animation-fill-mode: forwards; (that is supposed to retain the last state of animation) but then no animation occurs at all.

link: code pen link
Please help!

2

Along with adding animation-fill-mode: forwards, you need to specify the number of iterations the animation will run (which should be 1) using the animation-iteration-count property. Or you can use the shortcut method for specifying animations with the following:

.pop-up-animation {
  animation: animatetop 0.4s 1; /* the 1 at the end means iterate one time */
  animation-fill-mode: forwards;
}
1 Like
3

Actually :sweat_smile: you helped me to find the real problem. When I went back to add
animation-iteration-count:1;
I noticed I have missed the ; after animation-duration: 0.4s :scream_cat: and that was causing the animation to fail! Seriously spent more than 2 hours searching what I am doing wrong :sweat_smile:.
Thank you so much for your help! :+1::+1: