CSS3 gives us a very simple and easy way to create beautiful animations practically without losing anything in terms of performance.
You don’t need any jQuery plugin, just a few lines of CSS.
The only thing that you will be not able to do using only pure CSS is triggering the animation when the element enters the viewport.
If you want animations that start when the element enters the viewport, you should find a way to change the CSS class of that element when it enters or exit the viewport.
To do that you can install the ultra-light plugin Change Class In Viewport.
It inlines in the footer just a couple of lines of pure JavaScript, no additional HTTP requests, no additional database queries.
If you measure the performance with and without this plugin, you will not notice any difference at all.
After activation, all the elements that have the class .cciv-el will have the additional class in-viewport when they enter the viewport and not-in-viewport when they exit the viewport.
The effects that you see in this page are made with just these lines of CSS:
To assign the transition and prevent any issues when JavaScript is disabled.
.cciv-el{
transition: 2s transform ease
}
.cciv-no-script .cciv-el{
transform:none !important
}
Rotation effect.
.cciv-el.in-viewport.rotation-effect{
transform:rotateY(0deg)
}
.cciv-el.not-in-viewport.rotation-effect{
transform:rotateY(180deg)
}
Sliding effect.
.cciv-el.in-viewport.sliding-effect{
transform:translateY(0);
}
.cciv-el.not-in-viewport.sliding-effect{
transform:translateY(-300px);
}
Rotation animation
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
Rotation animation
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
Sliding animation
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
Sliding animation
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
You can change the selector to target the elements that you want to animate using the filter ‘cciv_el_selector’.
If for example instead of the CSS class .cciv-el you want something specific to your case, you can add this code in the functions.php of your child theme if any, or in a functional plugin:
add_filter( 'cciv_el_selector','my_cciv_selector' );
function my_cciv_selector( $selector ){
return '#my-custom-id .my-custom-class'; //The elements will not be target anymore by .cciv-el but by what you specify here
}So, after activating Change Class In Viewport, you just need is to write a few lines of CSS to have beautiful animations without losing anything in terms of performance.
Read on W3Schools about transitions and animations.