Elementor CSS transitions and animations tutorial: Build your own animations
Hey Designers! In this Elementor CSS tutorial, I teach you how to add CSS transitions, transformations and animations to any Section/Column/Widget.
► Get Elementor Pro — https://wpalgoridm.com/elementor
Custom Css tutorial: • Introduction to Custom CSS in Element...
Rotate/Scale/Transform Tutorial: • Elementor Rotate [Scale Transform] Im...
Background gradient tutorial: • Elementor gradient background tutoria...
Positioning tutorial: • Elementor custom positioning: Positio...
CSS animations tutorial: • Elementor CSS Animations : Add unlimi...
*Some Important Links*
Elementor Custom Breakpoints Tutorial:
• Elementor custom breakpoints: Solving...
Join the Facebook Group: / designschoolwp
Design your website: • Design WordPress website
Build your website: • Build WordPress Website
Customise your website:
• Customize WordPress website
Find the Code for applying various transitions below:
*Code for background color transition*
selector{
-webkit-transition:background-color 4s ease-in 2s;
transition:background-color 4s ease-in 2s;
}
/*Other values are ease, ease-out, ease-in-out, linear*/
selector:hover{
background-color: blue;
}
/*Code ends above*/
*Code for Background gradient transition*
selector{
-webkit-transition:background-image 4s ease-in 2s;
transition:background-image 4s ease-in 2s;
}
/*Other values are ease, ease-out, ease-in-out, linear*/
selector:hover{
background-image: linear-gradient(to right,red,blue,yellow);
}
/*Code ended above*/
*Code for Box shadow transition*
selector{
-webkit-transition:box-shadow 4s ease-in 2s;
transition:box-shadow 4s ease-in 2s;
}
/*Other values are ease, ease-out, ease-in-out, linear*/
selector:hover{
box-shadow: 4px 4px 4px blue,5px 5px 5px red, 6px 6px 6px yellow;
}
/*Code ended above*/
*Code for Border transition*
selector{
-webkit-transition:border 4s ease-in 2s;
transition:border 4s ease-in 2s;
}
/*Other values are ease, ease-out, ease-in-out, linear*/
selector:hover{
border: 5px dotted blue;
}
/*Code ended above*/
*Code for position transition*
selector{
-webkit-transition:position 4s ease-in 2s;
transition:position 4s ease-in 2s;
}
/*Other values are ease, ease-out, ease-in-out, linear*/
selector:hover{
position: relative;
top:20px;
left:20px;
}
/*Code ended above*/
*Code to rotate Transition*
selector{
-webkit-transition:position 4s ease-in 2s,-webkit-transform 4s ease-in;
-moz-transition:position 4s ease-in 2s,-moz-transform 4s ease-in;
-o-transition:position 4s ease-in 2s,-o-transform 4s ease-in;
transition:position 4s ease-in 2s,transform 4s ease-in;
}
/*Other values are ease, ease-out, ease-in-out, linear*/
selector:hover{
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
position: relative;
top:20px;
left:20px;
}
/*Code ends above*/
*Code to scale transitions*
selector{
-moz-transition:position 4s ease-in 2s,-moz-transform 4s ease-in;
-o-transition:position 4s ease-in 2s,-o-transform 4s ease-in;
-webkit-transition:position 4s ease-in 2s,-webkit-transform 4s ease-in;
transition:position 4s ease-in 2s,transform 4s ease-in;
}
/*Other values are ease, ease-out, ease-in-out, linear*/
selector:hover{
-moz-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
position: relative;
top:20px;
left:20px;
}