Keyframes | converting Adobe AE shape based animations to a data format | Animation library

I am working on making a Navigation Bar, because it is entertaining, but when trying to make a slight fade on hover using animations, for some reason the javascript implemented hoverout is only working once, and then it never does it again until refreshed.

Why is that, and are there any alternatives to doing this in javascript.

I have a animated div that flies to the top right corner of the viewport.

However, because of the overflow properties it not visible outside of parent container in Firefox. It is perfectly visible in Chrome.

Element behind the scrollbar in Firefox:

Element correctly above the parent in Chrome:

How can I make it work in Firefox as well? If overflow-y: auto is removed from .container the issue doesn't appear anymore, but that's not a viable solution as I need the scrollable content.

Here is an example. You can check that it produces the desired behaviour in Chrome, but not in Firefox:

So I am just a beginner and I am just trying to figure out animations and how they work.

My plan is to move the ball infinitenly in an infinite number of degrees (lets say 90) on a line. Here are a couple of problems I wondered:

1. Is there a better way to use classes that have common and slightly different rules (having different rotations) ?
2. How can I have the ball movement on the new lines having different rotations?

I have the following code:

I'm trying to synchronize CSS animations for multiple page elements receiving the same animation class.

There seems to be a lot of posts about this subject but no unified solution, and none of the solutions I've found seem to apply to this case.

I've prepared a jsfiddle here to demonstrate the issue:

https://jsfiddle.net/gdf7szo5/1/

If you click on any of the letters it will start the animation for that letter. If you click again it will switch to a different animation, and if you click a third time it will set the letter to have no animation at all.

The desired effect is for all letters blinking in one animation to be synchronized with each other, and any letters in the other animation to be synchronized with each other. To be clear, I'm not trying to synchronize the two animations — I just want all the elements with a given animation to be synchronized with each other.

But currently if one letter shows an animation and you set another letter to the same animation, unless you have absolutely perfect timing the animations for the two letters will be out of sync even though they're the same animation.

Here's the code in play:

HTML:

I have a simple on-hover CSS animation which makes slide transition between images.

When the user makes the hover on SECTION ONE and before the animation ends make hover on SECTION two, animation restart and make lagging move.

MY CODE:

To be able to see through to the other side what I want to do is make the circle area transparent so you are able to see through to the background image.

How would this be done?

Is there a way to do that?

https://jsfiddle.net/r95sy2fw/

This image is what I am trying to replicate in the code.

How do I make it transparent like that?

The snippet I provided currently looks like this:

Is it possible to have a CSS slider cycle through two images when animating them with the translateX transform property?

I'm facing a couple of issues:

1. I can't seem to get the second image to show even though it is in the HTML unless I use position: absolute and then the overflow: hidden doesn't work on the parent?

2. How do I reset the first image to go back to the beginning to start it all again?

Note: in the animation shorthand, the animation lasts for 2.5s and there is an initial delay of 3s.

I only want to do with this with the translateX property because I want the 60FPS smoothness (it will be done with translate3d when completed, but to make the code easier to read I've used translateX). I don't wish to animate margin: left or the left property etc.

Any help would be amazing.

Code is below or link to Codepen: https://codepen.io/anna_paul/pen/ZEJrvRp

I find this interesting documentation, that shows how to make an svg file animated.

https://css-tricks.com/svg-line-animation-works/

However, I am having issue with making my project look like it is being completed when open.

I want my project to animate similar to section 8 of the above doc.. Help please

[newbie]

https://jsfiddle.net/yoavf1bu/17/