Divi Builder Tutorial: Add CSS animations to your WordPress website|Step by Step




Hey Divi Nation! In this Divi builder tutorial, I’ll show you how to add CSS animations to any Section, Row, Column or any Divi Module.

This method is fast and simple. Plus, it doesn’t add any load to your server and animations are buttery Smooth.

Divi Custom CSS tutorial:

**Steps to follow: **

Edit any Page/Post/CPT with Divi Builder – Build on Front – In Visual Interface – Click on Settings for any section/column/row/module – Advanced- Custom Css – Main element – Paste CSS Code from below

**Steps to follow: **

**Find the CSS Code below for various animations below:**

**Animation #1- animate background colour, position**
/*Code starts from below-*/

/*Initial Properties here*/
background-color: black;
position: relative;
/*Change values for every prefix such as moz o webkit*/
-webkit-animation-name: example; /* Safari 4.0 – 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 – 8.0 */
-webkit-animation-iteration-count: infinite; /* Safari 4.0 – 8.0 */
-webkit-animation-direction:normal;
-webkit-animation-timing-function: linear;

-moz-animation-name: example; /* For Mozilla browser*/
-moz-animation-duration: 4s; /* Safari 4.0 – 8.0 */
-moz-animation-iteration-count: infinite; /* Safari 4.0 – 8.0 */
-moz-animation-direction:normal;
-moz-animation-timing-function: linear;

-o-animation-name: example; /* For Opera browser*/
-o-animation-duration: 4s; /* Safari 4.0 – 8.0 */
-o-animation-iteration-count: infinite; /* Safari 4.0 – 8.0 */
-o-animation-direction:normal;
-o-animation-timing-function: linear;

animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
/* animation-iteration-count: infinite;*/
animation-direction: reverse;
/* Other values for animation direction are normal, alternate, alternate-reverse */
animation-timing-function: linear;
/* Other values for animation timing functions are linear,ease,ease-in,ease-out, ease-in-out */

}

/* Safari 4.0 – 8.0 */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

@-moz-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
@-o-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/*Code ends above*/

Find Code for Animation #2 and Animation #3 in the first Comment 🙂

Happy designing 🙂


Fuente – Source

Divi Builder Tutorial: Add CSS animations to your WordPress website|Step by Step

Necesitas ayuda con wp? Entonces WPVideo es tu sitio.
Encuentra lo que buscas entre cientos de miles de videos y experiencias personales de otros usuarios. Todos los que empezamos con wp deberíamos tener acceso a esta web, ojalá yo hubiera tenido algo así cuando empecé mi camino como webmaster 🙂
Pero ahora quiero y puedo poner esta web a vuestra disposición.
Disfrutadla 😉

Need help with wp? Then WPVideo is your site.
Find what you are looking for among hundreds of thousands of videos and personal experiences of other users. All of us who started with wp should have access to this website, I wish I had something like that when I started my journey as webmaster 🙂
But now I want and I can put this website at your disposal.
Enjoy it 😉

https://www.wpvideo.eu

Publicado en Tutoriales (Tutorials), Wordpress y etiquetado .

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *