Tyler Potts Tyler Potts - 1 year ago 50
Javascript Question

I can't get my animation to work on load of my website using jquery

So the problem I am having is that I can't seem to get my jQuery Function to add a class to start my animation? I have tried a lot of different ways to get it to work, none of them are working!


window.onload = function render(){
$('.title .sub-title').addClass('render');


.render {
animation-name: render;
animation-duration: 2s;
animation-timing-function: ease-in-out;

@keyframes render {
0% { transform: translateX(-800px); }
100% { transform: translateX( 0px ); }


<div class="site-header-title-wrapper">
<h1 class="title">Template 1</h1><!--Need To add animation
<h4 class="sub-title">- Here is a Template Slogan -</h4><!--Need To add animation to-->

Please can someone help?

It would be very beneficial!

Answer Source

Try the following:

  $('.title, .sub-title').addClass('render');

The code in your example is targeting a .sub-title element nested within a .title element. Including a comma in your CSS selector should fix this.