Add CSS animations to your Gravity Forms
In this tutorial we’ll show you how a little bit of CSS animation, can make your entire form stand out, or just a single form element get the attention it deserves with CSS animations. We had an amazing response from our recent CSS tutorial on custom Gravity Forms CSS styles so wanted to extract some of the animation elements from that tutorial and show you how to add subtle animations to your next Gravity Forms.
Adding the CSS
Every design has the required CSS listed below. If you’re not already using Image Choices, you can add the custom CSS to your theme in a few ways suggested below:
- Install a custom CSS plugin such as Simple Custom CSS
- Add your CSS using your theme editor or customiser
- User the Image Choice custom CSS setting if you are adding Images to your choices
The below designs and CSS examples were tested in Gravity Forms version 2.6.6 with the default WordPress 2022 theme installed. These demos only support Gravity Forms 2.6.6+. Depending on the theme you are using, you may get different end results. Some basic further CSS tweaking will likely be required to get the result you want. Using older versions of Gravity Forms will most likely lead to unwanted end results.
Add wiggle to your form elements with CSS
Add a subtle wiggle animation to your form elements with CSS. We’ve added them to the submit buttons in the demo below but you can add these animation effects to any of the elements in your form.
/*Below will apply the chose wiggle effect to the submit button.*/
/*Just change the animation type to the wiiggle effect you want, wiggle1,wiggle2,wiggle3,wiggle4.*/
.gform_button.button {
animation: wiggle1 1.5s ease-in infinite;
}
/*CSS Wiggle 1*/
@keyframes wiggle1 {
0%, 7% {transform: rotateZ(0);}
15% {transform: rotateZ(-13deg);}
20% {transform: rotateZ(9deg);}
25% {transform: rotateZ(-10deg);}
30% {transform: rotateZ(7deg);}
35% {transform: rotateZ(-2deg);}
40%, 100% {transform: rotateZ(0);}
}
/*CSS Wiggle 2*/
@keyframes wiggle2 {
0% { transform: translate(2px, 0px); }
20% { transform: translate(-2px, 0px); }
40% { transform: translate(2px, 0px); }
60% { transform: translate(-2px, 0px); }
80% { transform: translate(2px, 0px); }
100% { transform: translate(0px, 0px); }
}
/*CSS Wiggle 3*/
@keyframes wiggle3 {
0% {transform: rotate(10deg);}
25% {transform: rotate(-10deg);}
50% {transform: rotate(20deg);}
75% {transform: rotate(-5deg);}
100% {transform: rotate(0deg);}
}
/*CSS Wiggle 4*/
@keyframes wiggle4 {
0% { transform: skewX(9deg); }
10% { transform: skewX(-8deg); }
20% { transform: skewX(7deg); }
30% { transform: skewX(-6deg); }
40% { transform: skewX(5deg); }
50% { transform: skewX(-4deg); }
60% { transform: skewX(3deg); }
70% { transform: skewX(-2deg); }
80% { transform: skewX(1deg); }
90% { transform: skewX(0deg); }
100% { transform: skewX(0deg); }
}Add pulsating effect to your form with CSS
Add an obvious pulsing effect with CSS to your Gravity Forms. This effect works really nicely in situations where you want to also bring attention to certain elements from within your form. Use it sparingly so as to not become too over baring.
Applying the CSS pulse effect to your fields
To add the pulse effect, simply add the class name pulse to any of the fields you’d like to add it to. You can do this by adding a custom class name to the field as shown in the screenshot below.
/*Add the class pulse to any field you want to pulse*/
.pulse input,
.pulse textarea {
animation: pulse-animation 3s infinite;
}
@keyframes pulse-animation {
0% {
box-shadow: 0 0 0 0px #2d6dec;
}
100% {
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
}Add a CSS animated gradient to your form background
Really want to showcase your form and have it visually stand out? This CSS snippet will give your form background a dynamic CSS gradient that slowly fades through colors. Just copy/paste the below CSS snippet, and add the CSS class gradient to your form settings as shown below.
/*Add animated CSS gradient to your form background*/
.gradient_wrapper {
background: linear-gradient(45deg, #2455EB, #24DDEB, #59EB24);
background-size: 600% 600%;
animation: GradientBackground 9s ease-in infinite;
border:none!important;
}
@keyframes GradientBackground {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}Summary & other CSS articles
Be sure to comment, share and send your finished examples on social media, or in the comments below! We’d love to see what you make of these examples!
