Updating Field Styling with CSS3 animation

I have a text field that gets updated based on other field selections. Everytime it updates it instantly updates. Is there a way to make it update slightly slower. (like a slow blink?). This is really just styling but would like it to update the field slightly slower.

Hi,

You can add CSS3 animations by inject custom CSS code in the Form Designer.

I'm not sure which of your forms and what fields you want to add effects. But I can show a demo on how I did a basic fading in my end.

My form: http://www.jotform.com/form/43498027603962

CSS3 animation: fades in and out twice when a dropdown is filled.

1. First, learn CSS3 animations, you can search the web or use W3Schools as reference.

2. I created my form with a dropdown and a text field.

3. I want to fade in and out the text field when a dropdown is filled. This is my custom CSS3 code.

#text_4, select[size="1"] { //#text_4 is the text field while the select is the dropdown.

    animation : blink 4s;

    -webkit-animation : blink 4s;

}

@keyframes blink {

      0% { opacity: 0.0; }

    50% { opacity: 1.0; }

    75% { opacity: 0.0; }

        100% { opacity: 1.0; }

    }

@-webkit-keyframes blink {

      0% { opacity: 0.0; }

    50% { opacity: 1.0; }

    75% { opacity: 0.0; }

        100% { opacity: 1.0; }

    }

4. I then navigate to Form Styles->Form Designer.

5. Add the custom CSS code in the CSS tab of the form designer.

6. Make sure to save the changes.

The code made not be perfect but it's a good way to have an idea on how to apply CSS3 animation to your code.

Let us know if you need more assistance on this.

Thank you.