6 Replies - 147 Views - Last Post: 10 January 2018 - 07:11 AM

#1 kukuviza  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 08-August 12

Problem with adding an animation programmatically

Posted 09 January 2018 - 07:28 AM

Hello, I want to add a simple animation to a text. A simple

@keyframes scroll {
 0% {
  top: 100%;
 }
 100% {
  top: -170%;
 }
}



but I want it to start the animation only when I press a button. So I tried to insert that animation in an html element via jquery by doing this:

$("#animation").html("<style>@keyframes scroll {0% {top: 100%;} 100% {top: -170%;}}</style>");



Ok, it works fine but not with Safari (if I automatically start the animation without having to press the button, the animation works in Safari as well).
I was suggested to put the animation in a class and then let the click function add the class. SO I did:

#titlecontent { 
    position: absolute; 
    top: 100%; color:#3998AC; 
  } 
 .start{ 
  animation: scroll 150s linear 1s; 
}


and
$("#titlecontent").addClass( "start" ); 



Again, this works with Chrome and Firefox but not with Safari (nor Windows Safari and neither with iPad Safari).
I don't understand where the problem is. Safari apparently doesn't consider this programmatically added animation.

Is This A Good Question/Topic? 0
  • +

Replies To: Problem with adding an animation programmatically

#2 andrewsw  Icon User is offline

  • blow up my boots
  • member icon

Reputation: 6444
  • View blog
  • Posts: 26,066
  • Joined: 12-December 12

Re: Problem with adding an animation programmatically

Posted 09 January 2018 - 07:50 AM

See here, CSS3 animation not working in safari and check for support at caniuse.com.

You may have to include the vendor prefixes.

Also check your browser's console for any JS errors.
Was This Post Helpful? 0
  • +
  • -

#3 kukuviza  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 08-August 12

Re: Problem with adding an animation programmatically

Posted 09 January 2018 - 08:08 AM

Thank you for the reply, I have now added

@-webkit-keyframes scroll {
 0% {
top: 100%;
}
 100% {
top: -170%;
}



but nothing has changed. The normal animation works fine. The trouble arises only if I try to make it start after clicking a button.
And I already have a delay, as one user has suggested.

I don't have js errors in the console (I guess that it there have been some error, the other browsers would not have rendered the animation as well

This post has been edited by kukuviza: 09 January 2018 - 08:10 AM

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • blow up my boots
  • member icon

Reputation: 6444
  • View blog
  • Posts: 26,066
  • Joined: 12-December 12

Re: Problem with adding an animation programmatically

Posted 09 January 2018 - 09:42 AM

.start{ 
  animation: scroll 150s linear 1s; 
}

Is that the correct syntax? (150 sec would be a long time) Isn't it just scroll linear 1s ? (I haven't done this for an age.)

You should also use -webkit-animation to marry with -webkit-keyframes

animation syntax

You should also repeat the settings with vendor and non-vendor prefixes.
Was This Post Helpful? 0
  • +
  • -

#5 kukuviza  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 08-August 12

Re: Problem with adding an animation programmatically

Posted 09 January 2018 - 11:12 AM

Well no, 150s is not su much, I have some paragraphs to scroll so they require some time. The delay is 1s. I am not very confident qith css animation though.
I have tried also adding the webkit rule together with the normal rule. I have also eliminated some transform css rule to see if something changes but nothing.
In what other way could I make an animation start programmatically?
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • blow up my boots
  • member icon

Reputation: 6444
  • View blog
  • Posts: 26,066
  • Joined: 12-December 12

Re: Problem with adding an animation programmatically

Posted 10 January 2018 - 02:34 AM

Oh, I see, the animation shorthand allows specifying both the duration and delay.

I noticed that someone at the link I provided also suggested that (some versions of Safari) may not recognise the animation shortcut, so one last thing I can suggest is to replace the shorthand with the explicit property values; again, both with and without the vendor prefix.

Maybe someone else has advice ;) Good luck.
Was This Post Helpful? 0
  • +
  • -

#7 kukuviza  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 08-August 12

Re: Problem with adding an animation programmatically

Posted 10 January 2018 - 07:11 AM

Ok, in the end I splitted the animation property separately and added the webkit also there and it worked!!!
Thank you very much! That was really weird, I don't know why Safari should accept the shorthand version of the animation only when it starts automatically. I suppose it is a kind of bug.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1