We Keep Coding

CSS Animations using libraries

so apologies that there are similar questions to this. I've done my best to look so any help would be appreciated.
I'm using a new library of animations from Animista to animate certain elements on a practice site.
I have no issues with animating elements as the page loads but I'm not sure how to go about getting them to trigger as they become visible like is common on so many sites nowadays.
Take this example;
.bounce-in-top {
-webkit-animation: bounce-in-top 1.1s both;
animation: bounce-in-top 1.1s both;
}
#-webkit-keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
.trigger {
/* The plan was to add this to all elements and then trigger animations each time the class is in the viewport*/
}
<h1 class="bounce-in-top trigger">Page title, animates on load</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 class="bounce-in-top trigger">Lower down, should animate when visible</h2>
The animation is applied to both header 1 and header 2 but the header 2 animation runs before the user sees it.
.bounce-in-top {
-webkit-animation: bounce-in-top 1.1s both;
animation: bounce-in-top 1.1s both;
}
#-webkit-keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
.trigger {
/* The plan was to add this to all elements and then trigger animations each time the class is in the viewport*/
}
<h1 class="bounce-in-top trigger">Page title, animates on load</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 class="bounce-in-top trigger">Lower down, should animate when visible</h2>
I'd use some sort of query selector so each time an element to be animated would appear it should then run its animation.
Any help and working code would be more than appreciated because I cannot find how to implement this.
Thanks in advance.

I think what you should do is track the scrolling state of the page, and start the animation if the scrolling position is superior to a certain value, and then change the animation value of CSS by using Javascript.
A simple example would be like this:
<html lang="en">
<head>
<style>
#header2 {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: none 1s infinite; /* Safari 4.0 - 8.0 */
animation: none 1s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
#keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
</style>
</head>
<body>
<h1 id="header1" style="height: 1200px;">This is first paragraph</h1>
<br>
<h1 id="header2">This is second paragraph</h1>
<script>
let myHeader2 = document.getElementById("header2");
window.setInterval(checkScrollingPosition, 200);
function checkScrollingPosition(){
console.log(window.scrollY)
if (window.scrollY > 200){
//starting animation if scrollPosition > 200
console.log("starting animation...")
startAnimation()
return;
}
}
function startAnimation(){
myHeader2.style.animation = "mymove 5s 1"
myHeader2.style.WebkitAnimation = "mymove 5s 1"
}
</script>
</body>
</html>
Depending of what you want to do, may be you could replace the threshold value to a certain percentage of the height of the page. For this just research the differents ways to get the scrolling state of the page.

Use the IntersectionObserver API. It makes it possible to check if the elements are in view of the user and call a function when that happens.
In the InterSectionObserver you call a function which will loop over all of the elements that have come in or out the view. In that function you can check each individual element to see its current position.
So check if an element is in the view, and if so, add the animation class to it.
Here below I've made a modification of your code. I've created a container around each title so that the title can animate within that container as well as to control the overflow.
So the .trigger elements are being watched. When they enter into view they get the class .bounce-in-top added to them.
To prevent the animation from suddenly animating from the top I've added a starting position for the .title elements. The starting position is always the same as the first keyframe of the animation.
// Create the observer.
const observer = new IntersectionObserver(entries => { // entries is a list of elements that have come in our out of view
entries.forEach(entry => { // Loop over every single entry
if (entry.isIntersecting || entry.intersectionRatio > 0) { // Check that an entry has come INTO view.
entry.target.classList.add('bounce-in-top'); // Add the class to the element.
}
});
});
// Select the triggers
const triggers = document.querySelectorAll('.trigger');
// Observe the triggers.
triggers.forEach(trigger => {
observer.observe(trigger);
});
/* Create a default begin state */
.title {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
}
/* Hide overflow of title container. */
.trigger {
overflow: hidden;
}
/* Select title for animation */
.bounce-in-top .title {
-webkit-animation: bounce-in-top 1.1s both;
animation: bounce-in-top 1.1s both;
}
#-webkit-keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
<div class="trigger">
<h1 class="title">Page title, animates on load</h1>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="trigger">
<h2 class="title">Lower down, should animate when visible</h2>
</div>

Why are CSS keyframe animations broken in Vue components with scoped styling?

I'm trying to implement a CSS typing indicator in Vue. Without Vue, it looks like this:
.typing-indicator {
background-color: #E6E7ED;
width: auto;
border-radius: 50px;
padding: 20px;
display: table;
margin: 0 auto;
position: relative;
-webkit-animation: 2s bulge infinite ease-out;
animation: 2s bulge infinite ease-out;
}
.typing-indicator:before, .typing-indicator:after {
content: '';
position: absolute;
bottom: -2px;
left: -2px;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: #E6E7ED;
}
.typing-indicator:after {
height: 10px;
width: 10px;
left: -10px;
bottom: -10px;
}
.typing-indicator span {
height: 15px;
width: 15px;
float: left;
margin: 0 1px;
background-color: #9E9EA1;
display: block;
border-radius: 50%;
opacity: 0.4;
}
.typing-indicator span:nth-of-type(1) {
-webkit-animation: 1s blink infinite 0.3333s;
animation: 1s blink infinite 0.3333s;
}
.typing-indicator span:nth-of-type(2) {
-webkit-animation: 1s blink infinite 0.6666s;
animation: 1s blink infinite 0.6666s;
}
.typing-indicator span:nth-of-type(3) {
-webkit-animation: 1s blink infinite 0.9999s;
animation: 1s blink infinite 0.9999s;
}
#-webkit-keyframes blink {
50% {
opacity: 1;
}
}
#keyframes blink {
50% {
opacity: 1;
}
}
#-webkit-keyframes bulge {
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
#keyframes bulge {
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
html {
display: table;
height: 100%;
width: 100%;
}
body {
display: table-cell;
vertical-align: middle;
}
<div class="typing-indicator">
<span></span>
<span></span>
<span></span>
</div>
– source: http://jsfiddle.net/Arlina/gtttgo93/
The problem is that the animation does not work when adding the scoped attribute to the component's style definition (<style lang="scss" scoped>). I believe it may be related to keyframes that should be declared globally.
The element with .typing-indicator is in the template of the component with scoped styling.
Does anyone have an idea of how I can allow my component to have scoped styling while making the keyframe animations work?

Problem
The problem is down to how the Webpack loader for Vue (vue-loader), incorrectly, parses animation names when adding IDs to scoped selectors and other identifiers. This is important because vue-loader's CSS scoping uses unique attributes added to elements to replicate the behaviour of CSS scoping. While your keyframe names get IDs appended, references to keyframes in animation rules in scoped styles do not.
Your CSS:
#-webkit-keyframes blink {
50% {
opacity: 1;
}
}
#keyframes blink {
50% {
opacity: 1;
}
}
#-webkit-keyframes bulge {
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
#keyframes bulge {
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
.typing-indicator {
...
-webkit-animation: 2s bulge infinite ease-out;
animation: 2s bulge infinite ease-out;
}
.typing-indicator span:nth-of-type(1) {
-webkit-animation: 1s blink infinite 0.3333s;
animation: 1s blink infinite 0.3333s;
}
.typing-indicator span:nth-of-type(2) {
-webkit-animation: 1s blink infinite 0.6666s;
animation: 1s blink infinite 0.6666s;
}
.typing-indicator span:nth-of-type(3) {
-webkit-animation: 1s blink infinite 0.9999s;
animation: 1s blink infinite 0.9999s;
}
Should get transformed to:
#-webkit-keyframes blink-data-v-xxxxxxxx {
50% {
opacity: 1;
}
}
#keyframes blink-data-v-xxxxxxxx {
50% {
opacity: 1;
}
}
#-webkit-keyframes bulge-data-v-xxxxxxxx {
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
#keyframes bulge-data-v-xxxxxxxx {
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
.typing-indicator {
...
-webkit-animation: 2s bulge-data-v-xxxxxxxx infinite ease-out;
animation: 2s bulge-data-v-xxxxxxxx infinite ease-out;
}
.typing-indicator span:nth-of-type(1) {
-webkit-animation: 1s blink-data-v-xxxxxxxx infinite 0.3333s;
animation: 1s blink-data-v-xxxxxxxx infinite 0.3333s;
}
.typing-indicator span:nth-of-type(2) {
-webkit-animation: 1s blink-data-v-xxxxxxxx infinite 0.6666s;
animation: 1s blink-data-v-xxxxxxxx infinite 0.6666s;
}
.typing-indicator span:nth-of-type(3) {
-webkit-animation: 1s blink-data-v-xxxxxxxx infinite 0.9999s;
animation: 1s blink-data-v-xxxxxxxx infinite 0.9999s;
}
However it only get's transformed to:
#-webkit-keyframes blink-data-v-xxxxxxxx {
50% {
opacity: 1;
}
}
#keyframes blink-data-v-xxxxxxxx {
50% {
opacity: 1;
}
}
#-webkit-keyframes bulge-data-v-xxxxxxxx {
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
#keyframes bulge-data-v-xxxxxxxx {
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
.typing-indicator {
...
-webkit-animation: 2s bulge infinite ease-out;
animation: 2s bulge infinite ease-out;
}
.typing-indicator span:nth-of-type(1) {
-webkit-animation: 1s blink infinite 0.3333s;
animation: 1s blink infinite 0.3333s;
}
.typing-indicator span:nth-of-type(2) {
-webkit-animation: 1s blink infinite 0.6666s;
animation: 1s blink infinite 0.6666s;
}
.typing-indicator span:nth-of-type(3) {
-webkit-animation: 1s blink infinite 0.9999s;
animation: 1s blink infinite 0.9999s;
}
Something to note: in the actual transformation, references to keyframe names in animation rules are missing the -data-v-xxxxxxxx at the end. This is the bug.
Currently (as of 47c3317) the animation name in shorthand animation rule declarations is identified by getting the first value out of splitting the animation rule by any whitespace character[1]. However the formal definition for the animation property states the animation name could appear anywhere within the rule definition.
<single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
– animation formal syntax[2]
Therefore, while your animation declarations are valid, vue-loader is not able to parse it.
Workaround
The current workaround for this is to move your animation names to the beginning of animation rule declarations. Your keyframe declarations do not need changing, they remain inside the scoped stylesheet. Your animation declarations should now look like this:
.typing-indicator {
...
-webkit-animation: bulge 2s infinite ease-out;
animation: bulge 2s infinite ease-out;
}
.typing-indicator span:nth-of-type(1) {
-webkit-animation: blink 1s infinite 0.3333s;
animation: blink 1s infinite 0.3333s;
}
.typing-indicator span:nth-of-type(2) {
-webkit-animation: blink 1s infinite 0.6666s;
animation: blink 1s infinite 0.6666s;
}
.typing-indicator span:nth-of-type(3) {
-webkit-animation: blink 1s infinite 0.9999s;
animation: blink 1s infinite 0.9999s;
}
References
[1] vue-loader/lib/style-compiler/plugins/scope-id.js#L67 # 47c3317
[2] Definition for animation in the Editor's Draft of W3C specification CSS Animations Level 1

I met the same problem and the first answer did tell me why it does not work, but the workaround part did not quite fix my issue... this is my code:
/* Animations */
#keyframes moveOut1 {
from {
transform: translateY(0) scale(0);
}
3% {
transform: translateY(0.2em) scale(1);
}
97% {
transform: translateY(7.3em) scale(1);
}
to {
transform: translateY(7.5em) scale(0);
}
}
#keyframes moveOut2 {
from {
transform: rotate(60deg) translateY(0) scale(0);
}
3% {
transform: rotate(60deg) translateY(0.2em) scale(1);
}
97% {
transform: rotate(60deg) translateY(7.3em) scale(1);
}
to {
transform: rotate(60deg) translateY(7.5em) scale(0);
}
}
#keyframes moveOut3 {
from {
transform: rotate(120deg) translateY(0) scale(0);
}
3% {
transform: rotate(120deg) translateY(0.2em) scale(1);
}
97% {
transform: rotate(120deg) translateY(7.3em) scale(1);
}
to {
transform: rotate(120deg) translateY(7.5em) scale(0);
}
}
#keyframes moveOut4 {
from {
transform: rotate(180deg) translateY(0) scale(0);
}
3% {
transform: rotate(180deg) translateY(0.2em) scale(1);
}
97% {
transform: rotate(180deg) translateY(7.3em) scale(1);
}
to {
transform: rotate(180deg) translateY(7.5em) scale(0);
}
}
#keyframes moveOut5 {
from {
transform: rotate(240deg) translateY(0) scale(0);
}
3% {
transform: rotate(240deg) translateY(0.2em) scale(1);
}
97% {
transform: rotate(240deg) translateY(7.3em) scale(1);
}
to {
transform: rotate(240deg) translateY(7.5em) scale(0);
}
}
#keyframes moveOut6 {
from {
transform: rotate(300deg) translateY(0) scale(0);
}
3% {
transform: rotate(300deg) translateY(0.2em) scale(1);
}
97% {
transform: rotate(300deg) translateY(7.3em) scale(1);
}
to {
transform: rotate(300deg) translateY(7.5em) scale(0);
}
}
#keyframes ripple {
from,
to {
width: 0.2em;
}
33% {
width: 2.4em;
}
}
so I asked a friend and the solution he provided me with is simply to place the css code out side and then import it into the vue component via
<style>
#import url(./{css_file_name}.css);
</style>
but I do not understand the mechanism behind this... but to me, it's fine as long as it works.

JS to keep css selector hover state on - css animation, have tried multiple answers with no success

so i have been through multiple answers already on stack overflow but due to me not being that experienced with JS i am here asking for some direct help with my question. I would like to keep the :hover state active even after my mouse has left the area of the element triggering the :hover.
At the moment i have an animation using css which is trigged using :hover selectors, now the problem i am having with the other answers provided i think is because the hover is trigged on one element while another element animates.
Below is my css and html,
css
#offerblock4:hover+#rotategiggles {
animation: animationFrames9 linear 0.5s;
animation-iteration-count: 1;
transform-origin: 100% 100%;
animation-fill-mode: forwards;
/*when the spec is finished*/
-webkit-animation: animationFrames9 linear 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 100% 100%;
-webkit-animation-fill-mode: forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames9 linear 0.5s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 100% 100%;
-moz-animation-fill-mode: forwards;
/*FF 5+*/
-o-animation: animationFrames9 linear 0.5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 100% 100%;
-o-animation-fill-mode: forwards;
/*Not implemented yet*/
-ms-animation: animationFrames9 linear 0.5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 100% 100%;
-ms-animation-fill-mode: forwards;
/*IE 10+*/
}
#keyframes animationFrames9 {
0% {
transform: translate(1px, 1px) scaleY(NaN);
}
100% {
transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-moz-keyframes animationFrames9 {
0% {
-moz-transform: translate(1px, 1px) scaleY(NaN);
}
100% {
-moz-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-webkit-keyframes animationFrames9 {
0% {
-webkit-transform: translate(1px, 1px) scaleY(NaN);
}
100% {
-webkit-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-o-keyframes animationFrames9 {
0% {
-o-transform: translate(1px, 1px) scaleY(NaN);
}
100% {
-o-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-ms-keyframes animationFrames9 {
0% {
-ms-transform: translate(1px, 1px) scaleY(NaN);
}
100% {
-ms-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
HTML
<div class="row">
<div class="column">
<a id="offerblock4" href="#">
<div class = "offer4 fullpic">
<img src="sm1611_offer4.jpg" style=" position:absolute; z-index:12;"></img>
</a>
<div id="rotategiggles" style="width:160px; height:auto; padding-left:80px; padding-top:338px;">
<img src="GIGGLES_1.png"></img>
</div>
</div>
BONUS POINTS i believe what i asked for is pretty standard and isn't too difficult and i wish i would do it myself so i will also challenege everyone by asking to even go one step further and if it would be possible to have js (or css) which would trigger the original animation on hover as is and then as the mouse leaves the element trigger another animation on the same element, basically allowing me to reverse the animation as the mouse leaves the area :)
Thank you all!
JS FIDDLE : https://jsfiddle.net/sLqf2zbh/
EDIT
I have seem to of over complicated with poor instructions; at the moment my animation works fine when #offerblock4 is hovered over making #rotategiggles animate . What i would wish to do is include JS so when the mouse leaves #offerblock4 then #rotategiggles keeps it's end of animation position and doesn't cut back too its original starting position.
The bonus points request was referring to when the mouse leaves the area of #offerblocks4 then the animation reverses back to its original position. I don't need help with the css animation itself more so something which will trigger a second animation when the mouse 'hovers off' #offerblocks4.

I have no idea what you were asking - but I think part of it was something like this?
How many bonus points do I get? (better be a lot)
#offerblock4+#rotategiggles {
animation: animationFrames8 linear 0.5s;
animation-iteration-count: 1;
transform-origin: 00 00;
transform: scale(-1.0, -1.0);
animation-fill-mode: forwards;
/*when the spec is finished*/
-webkit-animation: animationFrames8 linear 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 00 00;
-webkit-animation-fill-mode: forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames8 linear 0.5s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 0 00;
-moz-animation-fill-mode: forwards;
/*FF 5+*/
-o-animation: animationFrames8 linear 0.5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 100 100;
-o-animation-fill-mode: forwards;
/*Not implemented yet*/
-ms-animation: animationFrames8 linear 0.5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 00 0;
-ms-animation-fill-mode: forwards;
/*IE 10+*/
}
#offerblock4:hover+#rotategiggles {
animation: animationFrames9 linear 0.5s;
animation-iteration-count: 1;
transform-origin: 00 00;
animation-fill-mode: forwards;
/*when the spec is finished*/
-webkit-animation: animationFrames9 linear 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 00 00;
-webkit-animation-fill-mode: forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames9 linear 0.5s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 0 00;
-moz-animation-fill-mode: forwards;
/*FF 5+*/
-o-animation: animationFrames9 linear 0.5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 100 100;
-o-animation-fill-mode: forwards;
/*Not implemented yet*/
-ms-animation: animationFrames9 linear 0.5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 00 0;
-ms-animation-fill-mode: forwards;
/*IE 10+*/
}
#keyframes animationFrames9 {
0% {
transform: translate(1px, 1px);
}
100% {
transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-moz-keyframes animationFrames9 {
0% {
-moz-transform: translate(1px, 1px);
}
100% {
-moz-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-webkit-keyframes animationFrames9 {
0% {
-webkit-transform: translate(1px, 1px);
}
100% {
-webkit-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-o-keyframes animationFrames9 {
0% {
-o-transform: translate(1px, 1px);
}
100% {
-o-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-ms-keyframes animationFrames9 {
0% {
-ms-transform: translate(1px, 1px);
}
100% {
-ms-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#keyframes animationFrames8 {
100% {
transform: translate(1px, 1px);
}
0% {
transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-moz-keyframes animationFrames8 {
100% {
-moz-transform: translate(1px, 1px);
}
0% {
-moz-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-webkit-keyframes animationFrames8 {
100% {
-webkit-transform: translate(1px, 1px);
}
0% {
-webkit-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-o-keyframes animationFrames8 {
100% {
-o-transform: translate(1px, 1px);
}
0% {
-o-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
#-ms-keyframes animationFrames8 {
100% {
-ms-transform: translate(1px, 1px);
}
0% {
-ms-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
}
}
<div class="row">
<div class="column">
<a id="offerblock4" href="#">
<div class="offer4 fullpic">
<img src="sm1611_offer4.jpg" style=" position:absolute; z-index:12;"></img>
</a>
<div id="rotategiggles" style="width:160px; height:auto; padding-left:80px; padding-top:3px;">
<img src="GIGGLES_1.png"></img>
</div>
</div>

Jquery dlmenu animation is not smooth

I have created multilevel navigation menu using jquery dlmenu plugin v1.0.2 demo2.
Everything works fine, except CSS3 menu navigation is not smooth as jQuery left/right slide functionality is.
Is there any solution to resolve this issue without changing plugin?
/* Animation classes for moving out and in */
.dl-menu.dl-animate-out-2 {
-webkit-animation: MenuAnimOut2 0.3s ease-in-out forwards;
-moz-animation: MenuAnimOut2 0.3s ease-in-out forwards;
animation: MenuAnimOut2 0.3s ease-in-out forwards;
}
#-webkit-keyframes MenuAnimOut2 {
100% {
-webkit-transform: translateX(-100%);
opacity: 0;
}
}
#-moz-keyframes MenuAnimOut2 {
100% {
-moz-transform: translateX(-100%);
opacity: 0;
}
}
#keyframes MenuAnimOut2 {
100% {
transform: translateX(-100%);
opacity: 0;
}
}
.dl-menu.dl-animate-in-2 {
-webkit-animation: MenuAnimIn2 0.3s ease-in-out forwards;
-moz-animation: MenuAnimIn2 0.3s ease-in-out forwards;
animation: MenuAnimIn2 0.3s ease-in-out forwards;
}
#-webkit-keyframes MenuAnimIn2 {
0% {
-webkit-transform: translateX(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}
#-moz-keyframes MenuAnimIn2 {
0% {
-moz-transform: translateX(-100%);
opacity: 0;
}
100% {
-moz-transform: translateX(0px);
opacity: 1;
}
}
#keyframes MenuAnimIn2 {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}

You have to use the plugin like this : with animationClasses "in" and "out" not "classin" and "classout"
$(function() {
$( '#dl-menu' ).dlmenu({
animationClasses : { in : 'dl-animate-in-2', out : 'dl-animate-out-2' }
});
});

Safari animation on form submit

I have page with form, that loads quite long after submit. That is why I decide to place spinner over button.
Instead if submit button I have div, that make:
$submit_btn.click(function(e){
if ($submit_btn.attr("data-send") == "yes"){
e.preventDefault();
}
else {
$('#reg').html('<div id="spin_reg" class="spinner-icon"></div>');
$new_try_now.submit();
}
});
In div spinner I have CSS3 animation.
Problem is that animation works well in Chrome, but in Safari it doesn't start.
I think the problem is that Safari kill all processes on page.
How I can avoid it without AJAX?
Edit:
Animation:
#-webkit-keyframes nprogress-spinner {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
#-moz-keyframes nprogress-spinner {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
#-o-keyframes nprogress-spinner {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
#-ms-keyframes nprogress-spinner {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
#keyframes nprogress-spinner {
0% { transform: rotate(0deg); transform: rotate(0deg); }
100% { transform: rotate(360deg); transform: rotate(360deg); }
}
.spinner-icon {
display: block;
width: 16px;
height: 16px;
border: solid 2px transparent;
border-top-color: #158FD2;
border-left-color: #158FD2;
border-radius: 100%;
-webkit-animation: nprogress-spinner 900ms linear infinite;
-moz-animation: nprogress-spinner 900ms linear infinite;
-ms-animation: nprogress-spinner 900ms linear infinite;
-o-animation: nprogress-spinner 900ms linear infinite;
animation: nprogress-spinner 900ms linear infinite;
}

A bit late to answer this, but may still help somebody. :)
Safari stops running scripts/gifs and etc. after submit. You need to submit the form after the spinner is shown already.
$('#spinner').show(function() {
$('#form').submit();
});
In my case #spinner was already rendered with style='display:none'.
If you don't want to render it before you need it, you can add display:none to your #spin_reg CSS, and then write JS like this:
$('#reg')
.html('<div id="spin_reg" class="spinner-icon"></div>')
.show(function() { $new_try_now.submit(); });