wpengine

wpengine

Welcome, Guest
Username: Password: Remember me
Forgot your password? Forgot your username? Create an account
Forum
Animate It!
Questions
Animate-it slows down keyframe animations

TOPIC: Animate-it slows down keyframe animations

Animate-it slows down keyframe animations 7 years 2 months ago #957

Hi,

This is a great plugin. However, today I ran into a problem:

I have a page with a simple keyframe animation on it (to turn an image from grey to color on hover). This worked fine before, without dealy. Then I applied an Animate-It effect to an element earlier on the page. Now all keyframe elements lower on the page are delayed in their keyframe-animation (i.e. when hovering, it takes a while before the effect occurs). Apparently Animate-It is interfering with the keyframe animations.

I have tried to find out if there are some classes that Animate_it defines that might be the cause of this, but I haven't been able to find the solution. Would you have an idea how to solve this?

These are the classes I used for the Animate-it:
animated slideInRight duration5

And this is the code for the Keyframe animations
@keyframes portret_cover_grijs {
  from 	{transform: -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ ; filter: grayscale(0%);}
  to 		{transform: -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ ; filter: grayscale(100%);}
	}
@keyframes portret_cover_grijs_hover {
  from	{transform: -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ ; filter: grayscale(100%) contrast(100%);}
  to	 	{transform: -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ ; filter: grayscale(0%) contrast(100%);}
	}

.portret {
	animation-name: portret_cover_grijs;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  }
  
.portret:hover {
  animation-name: portret_cover_grijs_hover;
  animation-duration: .3s;
	}

Thanks!
Manon
The administrator has disabled public write access.

Animate-it slows down keyframe animations 7 years 2 months ago #958

  • eLEOPARD
  • eLEOPARD's Avatar
  • Offline
  • Administrator
  • Posts: 409
  • Thank you received: 54
  • Karma: -28
Dear Manonschuitema,

Thanks for using the Animate It!

The classes you are using are fine and should work as expected.
Meaning "animated slideInRight duration5" elements should have delay and otehrs should now.

Could you share the link to the page where this issue is?
This would allow me to Inspect the page to see if there is any conflict.
The administrator has disabled public write access.

Animate-it slows down keyframe animations 7 years 2 months ago #959

Hi,

Thanks for the answer. The site is live, so I changed things back to the sitation without Animate-it. But I've set up a test page here:

[url=http://]http://poeziebordeel.nl/?page_id=763[/url]

The top images on the test page have Animate-it applied to it. This influences the speed of the Keyframe animations that are applied to the line-up photo's . The original homepage (and it's English counterpart) are without Animate-it, and on those pages, the Keyframe animations are much faster:

[url=http://]www.poeziebordeel.nl[/url]

Thanks!
Last Edit: 7 years 2 months ago by manonschuitema.
The administrator has disabled public write access.

Animate-it slows down keyframe animations 7 years 2 months ago #960

  • eLEOPARD
  • eLEOPARD's Avatar
  • Offline
  • Administrator
  • Posts: 409
  • Thank you received: 54
  • Karma: -28
Dear Manonschuitema,

I checked the links and you are right, the Safari is causing delay when the Animate It! animations are added.

The thing is, there is no other class/conflict that I found which might cause this, and the Animate It! classes and the custom CSS you wrote are not conflicting as well. The delay, duration etc. are all fine.

I am sorry but I cannot put a finger on what is causing this behavior.
The same page and animations load fine on all other browsers like Chrome Firefox and IE11.

I believe this might be a bug on Safari's end.
The administrator has disabled public write access.
Forum
Animate It!
Questions
Animate-it slows down keyframe animations
Time to create page: 0.036 seconds

Need Customization? Feel free to...

Contact Us

If you like these extensions, help us buy Yoga Mats :)