Develop Reference

Add and Remove Keyframe on time

I have 3 moving objects with my keyframe:
#keyframes rotation {
0% {
transform: rotateY(0deg)
}
10% {
transform: rotateY(55deg)
}
30% {
transform: rotateY(55deg)
}
60% {
transform: rotateY(230deg)
}
80% {
transform: rotateY(230deg)
}
100% {
transform: rotateY(360deg)
}
}
this moves my object ->
css:
.object{
position: relative;
margin: auto;
height: 300px;
width: 300px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
transition: transform 2s linear;
transform-style: preserve-3d;
transform: rotateY(230deg);
}
.cb2 {
animation: rotation 20s infinite linear;
}
Now I want the first object to spin once then when it's done the second one should spin, when the second one is done the third one should spin.
I tried something like this:
setTimeout(function() {
$("#first").addClass('cb2');
}, 10000);
setTimeout(function() {
$("#first").removeClass('cb2');
}, 16500);
setTimeout(function() {
$("#second").addClass('cb2');
}, 16600);
setTimeout(function() {
$("#second").removeClass('cb2');
}, 29900);
setTimeout(function() {
$("#third").addClass('cb2');
}, 30100);
First of all, that doesn't really work, because it's not really smooth but the main problem is, that this will do the job once, but I want to loop this.
Is that possible ?
HTML:
<div id="container">
<div id="thrdcb" class="position-absolute displayres" style="top:100px;left: 10%;bottom:0;pointer-events: none;">
<div class="container">
<div class="row mt-5">
<div class="col">
<div data-index="7" data-chapter="1" data-names="opacity,margin-left" data-start-values="0,-10px" data-end-values="1,0" data-delay="1000" style="opacity: 0;" class="wontainer">
<div class="navbar"></div>
<div class="news-grid">
<div class="news-card">
<div id="firstcube" class="object">
<div class="face one">
<p id="firstnewssub" style="position: relative; background-color: #a3ba1e; padding: 10px;">
</p>
</div>
<div class="face two">
<p id="firstnewssub2" style="position: relative; background-color: #a3ba1e; padding: 10px;">
</p>
</div>
<div class="face three">
<img src="data/img/testasdd.png" alt="" />
<p id="aaaae" style="position: relative; background-color: #a3ba1e; padding: 10px;">
</p>
</div>
<div class="face four">
<img src="data/img/asddfff.png" alt="" />
<p id="firstnews2" style="position: relative; background-color: #a3ba1e; padding: 10px;">
</p>
</div>
</div>
<a id="rrzuii" href="https://example.com" target="_blank" rel="noopener noreferrer" data-index="7" data-chapter="1"
data-names="opacity, pointer-events" data-start-values="0, none" data-end-values="1, all" data-delay="1000" style="opacity: 0; margin-left: 0px;text-align: center; cursor: pointer;display: none;" class="asdz7">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="scndcb" class="position-absolute displayres" style="top:100px;right: 10%;bottom:0;pointer-events: none;">
<div class="container">
<div class="row mt-5">
<div class="col">
<div data-index="7" data-chapter="1" data-names="opacity,margin-left" data-start-values="0,-10px" data-end-values="1,0" data-delay="1000" style="opacity: 0;" class="wontainer">
<div class="news-grid">
<div class="news-card">
<div id="thirdcube" class="object">
<div class="face one">
<p id="lppzz" style="position: relative; background-color: #62798b; padding: 10px;">
</p>
</div>
<div class="face two">
<p id="iottt" style="position: relative; background-color: #62798b; padding: 10px;">
</p>
</div>
<div class="face three">
<img src="data/img/asdaqqqqq.png" alt="" />
<p id="thirdnews1" style="position: relative; background-color: #62798b; padding: 10px;">
</p>
</div>
<div class="face four">
<img src="data/img/uthhase.png" alt="" />
<p id="thirdnews2" style="position: relative; background-color: #62798b; padding: 10px;">
</p>
</div>
</div>
<a id="aaklptt" href="https://example.com" target="_blank" rel="noopener noreferrer" data-index="7" data-chapter="1" data-names="opacity, pointer-events"
data-start-values="0, none" data-end-values="1, all" data-delay="1000" style="opacity: 0; margin-left: 0px;text-align: center; cursor: pointer;display: none;" class="-blue">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="cubepointer" class="position-absolute displayres" style="top: 100px; left: 20%; right: 20%; bottom: 0px;pointer-events: none;">
<div class="container">
<div class="row mt-5">
<div class="col">
<div data-index="7" data-chapter="1" data-names="opacity,margin-left" data-start-values="0,-10px" data-end-values="1,0" data-delay="1000" style="opacity: 0;" class="wontainer">
<div class="news-grid">
<div class="news-card">
<div id="secondcube" class="object">
<div class="face one">
<p id="dghh" style="position: relative; background-color: #e07a0c; padding: 10px;">
</p>
</div>
<div class="face two">
<p id="aas" style="position: relative; background-color: #e07a0c; padding: 10px;">
</p>
</div>
<div class="face three">
<img src="data/img/adasd.png" alt="" />
<p id="ffss" style="position: relative; background-color: #e07a0c; padding: 10px;">
</p>
</div>
<div class="face four">
<img src="data/img/testm.png" alt="" />
<p id="zz" style="position: relative; background-color: #e07a0c; padding: 10px;">
</p>
</div>
</div>
<a id="rdda" href="https://example.com" target="_blank" rel="noopener noreferrer" data-index="99" data-chapter="1" data-names="opacity, pointer-events" data-start-values="0, none" data-end-values="1, all"
data-delay="9999" style="opacity: 0; margin-left: 0px;text-align: center; cursor: pointer;display: none;" class="font-weight font">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You can make use of the animation event. In your case the animation is defined as animation: rotation 20s infinite linear;, so to stop the animation and start the next you need to look for the animationiteration event.
I wrapped the elements in a <div> for the event listener. At the same time this wrapper can be used for finding the next element to animate.
const container = document.getElementById('container');
//container.addEventListener('animationend', e => {
container.addEventListener('animationiteration', e => {
$(e.target).removeClass('cb2');
let next = e.target.parentElement.querySelector(`div#${e.target.id}~div.object`);
if(next){
$(next).addClass('cb2');
}else{
$(e.target.parentElement.querySelector(`div.object`)).addClass('cb2');
}
});
// initiate animation
$(container.querySelector(`div.object`)).addClass('cb2');
#keyframes rotation {
0% {
transform: rotateY(0deg)
}
10% {
transform: rotateY(55deg)
}
30% {
transform: rotateY(55deg)
}
60% {
transform: rotateY(230deg)
}
80% {
transform: rotateY(230deg)
}
100% {
transform: rotateY(360deg)
}
}
.object {
position: relative;
margin: auto;
height: 100px;
width: 100px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
transition: transform 2s linear;
transform-style: preserve-3d;
transform: rotateY(230deg);
}
.cb2 {
animation: rotation 20s infinite linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="first" class="object">A</div>
<div id="second" class="object">B</div>
<div id="third" class="object">C</div>
</div>
Update
The first example assumes that all the div.object elements are siblings. The following example is showing how div.object elements can be in a nested structure. In this case there is a need for a variable objects that hold all the div.objects. The selection of the next element happens based on the index of the current element in the array.
const container = document.getElementById('container');
const objects = container.querySelectorAll('.object');
container.addEventListener('animationiteration', e => {
$(e.target).removeClass('cb2');
let currentIndex = [...objects].indexOf(e.target);
let next = objects[currentIndex+1];
if(next){
$(next).addClass('cb2');
}else{
$(objects[0]).addClass('cb2');
}
});
// initiate animation
$(objects[0]).addClass('cb2');
#keyframes rotation {
0% {
transform: rotateY(0deg)
}
10% {
transform: rotateY(55deg)
}
30% {
transform: rotateY(55deg)
}
60% {
transform: rotateY(230deg)
}
80% {
transform: rotateY(230deg)
}
100% {
transform: rotateY(360deg)
}
}
.object {
position: relative;
margin: auto;
height: 100px;
width: 100px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
transition: transform 2s linear;
transform-style: preserve-3d;
transform: rotateY(230deg);
}
.cb2 {
animation: rotation 20s infinite linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div>
<div id="first" class="object">A</div>
</div>
<div>
<div id="second" class="object">B</div>
</div>
<div>
<div id="third" class="object">C</div>
</div>
</div>

While it is theoretically possible to do this in CSS, using one set of keyframes and the animation-delay CSS property, there is a possibility that timings could get out of step, as pointed out in a comment (depending for example how busy the system is with other things).
This snippet therefore sets the animation going for one cycle on the first object, listens for when that animation ends, removes the animation and puts it onto the next object and so on. That way it is guaranteed to keep in step sequentially, even if things get a little delayed sometime.
const objects = document.querySelectorAll('.objects > *');
const num = objects.length;
let n = 0;
objects.forEach(object => {
object.addEventListener('animationend', function() {
object.classList.remove('cb2');
n = (n + 1) % num;
objects[n].classList.add('cb2');
});
});
objects[n].classList.add('cb2');
#keyframes rotation {
0% {
transform: rotateY(0deg)
}
10% {
transform: rotateY(55deg)
}
30% {
transform: rotateY(55deg)
}
60% {
transform: rotateY(230deg)
}
80% {
transform: rotateY(230deg)
}
100% {
transform: rotateY(360deg)
}
}
.objects>* {
position: relative;
margin: auto;
height: 300px;
width: 300px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
transition: transform 2s linear;
transform-style: preserve-3d;
transform: rotateY(230deg);
}
.objects>*:nth-child(1) {
background: cyan;
}
.objects>*:nth-child(2) {
background: magenta;
}
.objects>*:nth-child(3) {
background: yellow;
}
.cb2 {
animation: rotation 20s 1 linear;
}
<div class="objects">
<div></div>
<div></div>
<div></div>
</div>

Animations are slowing the performance of web page

I have a single page website design in html, javascript and css. There are lots of images on the webpage and all have different-different animation effects according to their categories. I have used wow.js for animation effects on window scroll. While scroll through images, CPU and GPU usage is going very high, due its effect the scrolling is jerky, not smooth. Could anyone please look into this. I have created a codepen example. Please have a look:-
(https://codepen.io/Sny220/pen/jjyEPj)
Code below:-
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3 over-hidden">
<img class="wow zoominoutsingle" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3 over-hidden">
<img class="wow zoominoutsingle" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
<h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3 over-hidden">
<img class="wow zoominoutsingle" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3 over-hidden">
<img class="wow zoominoutsingle" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
<h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3 over-hidden">
<img class="wow zoominoutsingle" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3 over-hidden">
<img class="wow zoominoutsingle" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
<h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3">
<img class="wow scale-in-ver-top" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3">
<img class="wow scale-in-ver-top" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
<h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3">
<img class="wow scale-in-ver-top" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3">
<img class="wow scale-in-ver-top" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
body {
padding-top: 20px;
}
/* set colors*/
:root {
--color-1: forestgreen;
--color-2: lightskyblue;
--color-3: darksalmon;
--color-4: palegoldenrod;
--color-5: mediumvioletred;
}
img {
width: 100%;
}
.foo {
margin-bottom: 10px;
color: white;
}
.navbar {}
.foo .inner {
padding: 5px;
min-height: 20vh;
}
.foo-text .inner {
min-height: 60vh !important;
}
/* apply colors */
.foo-1 .inner {
background-color: var(--color-1);
}
.foo-2 .inner {
background-color: var(--color-2);
}
.foo-3 .inner {
background-color: var(--color-3);
}
.foo-4 .inner {
background-color: var(--color-4);
}
.foo-5 .inner {
background-color: var(--color-5);
}
.bg-color {
background-color: var(--color-5);
color: #fff;
margin-top: 20px;
margin-bottom: 20px;
}
.over-hidden {
overflow: hidden;
}
.swing {
overflow: hidden;
}
.scale-in-ver-top {
-webkit-animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#-webkit-keyframes scale-in-ver-top {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
}
#keyframes scale-in-ver-top {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
}
.swing-in-top-fwd {
-webkit-animation-name: swing-in-top-fwd;
animation-name: swing-in-top-fwd;
}
#-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
}
#keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
}
#keyframes zoominoutsinglefeatured {
0% {
transform: scale(1, 1);
webkit-transform: scale(1, 1);
}
50% {
transform: scale(2, 2);
webkit-transform: scale(2, 2);
}
100% {
transform: scale(1, 1);
webkit-transform: scale(1, 1);
}
}
.zoominoutsingle {
animation-name: zoominoutsinglefeatured;
webkit-animation-name: zoominoutsinglefeatured;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
wow = new WOW();
wow.init();
$(".foo-5").hover(function(e) {
$(this).addClass('animated pulse');
}, function(e) {
$(this).removeClass('animated pulse');
});
var $animation_elements = $('.wow');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.removeClass('animated');
$element.addClass('animated');
} else {
$element.css({
'visibility': 'hidden',
'animation-name': 'none'
}).removeClass('animated');
wow.addBox(this);
}
});
}
WOW.prototype.addBox = function(element) {
this.boxes.push(element);
};
$window.on('scroll resize', check_if_in_view);
update:- This is just an example that i am using in webpage. Web page
has different number of sections apporx. 20 sections and all are
having 10 or more images. So when we are running that much images with
animations the performance goes down.
I have checked it on mac Safari 11 & 12, the animation and scroll is
not smooth. There is jerkiness while scrolling and animations are very
slow with jerks.

You can probably gain a lot of performance by using Intersection Observer (IO) instead of listening to the scroll event. IO was introduced because listening to the scroll event and calculating height/width of elements results in poor performance.
First you have to create a new observer:
var options = {
rootMargin: '0px',
threshold: 1.0
}
var observer = new IntersectionObserver(callback, options);
Here we specify that once the observed element is 100% visible, some callback should be executed.
Then you have to specify which items to observe, in your case I think this would be:
var target = document.querySelector('.wow');
observer.observe(target);
So we define that once any element with the class "wow" is visible on the page, the callback is getting executed:
var callback = function(entries, observer) {
entries.forEach(entry => {
// Each entry describes an intersection change for one observed
// target element:
});
};
Here you specify what should happen for each "wow"-Element in your page that is getting visible.
If you are using CSS for your animations and not JS then the animations should now be smooth.
It also depends on what parameters you are animating, here is a good list of properties to avoid animating with CSS.
I won't copy the whole list here, but the most important ones would be padding, width, height and position.
Edit:
If you need to support older browsers than use this (official) polyfill from w3c, it recreates intersection observer with listening to scroll events. So it will still be slower on older browsers, nothing you can do about it here. But on newer ones there will be an increase in performance.

You can use lazy loading for animations and perform in a better way the loading of view elements.
JQuery Lazy

Since it looks like you're only using animated pulse, and are already adding and removing the animated class, I'd highly suggest using CSS animations.
CSS animations are rendered with the GPU and do not use the main thread like JavaScript does. They're super smooth and performant!
Check out this Codepen I found on Google creating a pulsing animated icon: https://codepen.io/igorsheg/pen/MBpwGw

How can I apply transition to next slide using CSS

I am building a quiz which will consist of a number of slides, while going between the slides using I want to apply a transition similar to this site where the next card slides in slightly.
I have tried applying the transition on my .active classes but this doesn't appear to have any affect.
CodePen
HTML:
<div class="row main-row align-items-center diagonal-stripe-1">
<div class="col d-flex justify-content-center">
<div class="card card1 w-50 active">
<div class="card-body text-center">
<h5 class="card-title">Questionnaire</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
<div class="card card2 w-50">
<div class="card-body text-center">
<h5 class="card-title">Next Question Goes Here</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
</div>
</div>
</div>
CSS:
.main-row {
/*border: 1px solid red;*/
height: 80vh;
}
.diagonal-stripe-1 { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg=="); background-repeat: repeat; }
/* CARD STYLES */
.card {
display: none;
margin-left: 50px;
}
.card.active {
display: block;
margin-left: 0px;
transition: 2s;
/*transform:translate(0);*/
}
JS:
$(document).ready(function() {
$( ".first-btn" ).click(function() {
console.log( "Handler for .click() called." );
$(".card1").toggleClass('active');
$(".card2").toggleClass('active');
});
});

It's because your active card was not showing, I've tried to show your card2 first and call setTimeout to toggleClass, and it works:
$(document).ready(function() {
$( ".first-btn" ).on('click', function() {
$(".card1").toggleClass('active');
$(".card2").show();
setTimeout(() => {
$(".card2").toggleClass('active');
}, 10)
});
});
.main-row {
/*border: 1px solid red;*/
height: 80vh;
}
.diagonal-stripe-1 { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg=="); background-repeat: repeat; }
/* CARD STYLES */
.card {
display: none;
margin-left: 50px;
}
.card.active {
transition: all 1s ease-in-out;
display: block;
margin-left: 0px;
/*transform:translate(0);*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row main-row align-items-center diagonal-stripe-1">
<div class="col d-flex justify-content-center">
<div class="card card1 w-50 active">
<div class="card-body text-center">
<h5 class="card-title">Questionnaire</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
<div class="card card2 w-50">
<div class="card-body text-center">
<h5 class="card-title">Next Question Goes Here</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
</div>
</div>
</div>

You're using the wrong property, you want
transition-duration: 2s;
But this belongs under .card so it looks more like this:
.card {
display: none;
margin-left: 50px;
transition-duration: 2s;
}
.card.active {
display: block;
margin-left: 0px;
/*transform:translate(0);*/
//more .active css...
}
here's some more info
https://www.w3schools.com/csSref/css3_pr_transition-duration.asp

I believe this is what you are missing:
.card.active {
display: block;
margin-left: 0px;
-webkit-animation: slideIn 2s forwards;
-moz-animation: slideIn 2s forwards;
animation: slideIn 2s forwards;
}
#-webkit-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#-moz-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
You could check the following fiddle or check codepen fork:
$(document).ready(function() {
$( ".first-btn" ).click(function() {
console.log( "Handler for .click() called." );
$(".card1").toggleClass('active');
$(".card2").toggleClass('active');
});
});
.main-row {
/*border: 1px solid red;*/
height: 80vh;
}
.diagonal-stripe-1 { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg=="); background-repeat: repeat; }
/* CARD STYLES */
.card {
display: none;
margin-left: 50px;
}
.card.active {
display: block;
margin-left: 0px;
-webkit-animation: slideIn 2s forwards;
-moz-animation: slideIn 2s forwards;
animation: slideIn 2s forwards;
/*transform:translate(0);*/
}
#-webkit-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#-moz-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row main-row align-items-center diagonal-stripe-1">
<div class="col d-flex justify-content-center">
<div class="card card1 w-50 active">
<div class="card-body text-center">
<h5 class="card-title">Questionnaire</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
<div class="card card2 w-50">
<div class="card-body text-center">
<h5 class="card-title">Next Question Goes Here</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
</div>
</div>
</div>
See link for more details regarding CSS Animations and Transitions

jquery different image smooth hover with background on all browsers

I am trying to make an image hover with background behind.
The problem is that this is not working smooth on all browsers. I want the background immediately hover when the mouse enters the image. how can i make this smooth and work on all browsers?
HTML:
<div class="col-lg-12 col-md-12 col-sm-12 col-sx-12 portfolio" id="work">
<div class="container">
<div class="row">
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#nieuwecreatie">
<img src="image/nieuwecreatie.jpg" alt="nieuwecreatie" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#avpro">
<img src="image/avpro.jpg" alt="avpro" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#fuxing">
<img src="image/fuxing.jpg" alt="fuxing" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6 hidden-sm">
<a href="#seedsofhope">
<img src="image/seedsofhope.jpg" alt="seedsofhope" class="transition"/>
</a>
</section>
</div>
<div class="row">
<section class="col-lg-3 col-sm-4 col-xs-6 visible-sm">
<a href="#seedsofhope">
<img src="image/seedsofhope.jpg" alt="seedsofhope" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#beneluxtaxi">
<img src="image/benelux-taxi.jpg" alt="benelux-taxi" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#intergroep">
<img src="image/intergroep.jpg" alt="intergroep" class="transition"/>
</a>
</section>
</div>
</div>
<div id="hovercontent" class="transition"></div>
</div>
CSS:
.transition{transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;}
.portfolio{padding:150px 0; position:relative;}
.portfolio #hovercontent{position:absolute; top:0; left: 0; width:100%; height:100%; background-size: 100% !important; z-index:-999; opacity: 0.4;}
.portfolio section{opacity: 0; margin-bottom:20px;}
.portfolio section img{width:100%; position: relative;}
.portfolio section .item-layer{display:none; width:100%; height:100%; background:rgba(0,0,0,0.5); position: absolute; top:0; left:0; text-align: center; padding-top:100px; font-family: BebasNeue; font-size: 2em; color:white;}
.portfolio section img:hover{margin:-10px 0 0 0;}
jQuery:
//load bg images
$('#hovercontent').fadeOut();
if(window.location.hash || !window.location.hash){
history.replaceState(null, null,' ');
var url = $(location).attr('href')+'image/';
}
$('.portfolio img').mouseenter(function(){
var srcValue = $(this).attr('src').split('/');
srcValue = srcValue[1].split('.');
srcValue = srcValue[0]+'-bg';
$('#hovercontent').fadeIn(function() {
$(this).css('background', 'url('+url+srcValue+'.jpg) no-repeat');
});
});
What am I doing wrong and how can I fix it?

Check out this fiddle and change it to your needs. Store your image in a data= attribute.
HTML:
Red BG
Green BG
Blue BG
Yellow BG
Javascript:
$(document).ready(function(){
$('a').mouseenter(function(){
var self = $(this),
color = self.data('color');
$('body').css('background-color',color);
});
});
CSS:
body {
background-color: pink;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}
Change it to fit your needs, this snippet is easily cofigurable and it works in all modern browsers (>IE9, Chrome, Safari, Firefox, Mobile etc...). To set images as background, I would use it like this:
HTML:
Some BG
JS:
$(document).ready(function(){
$('a').mouseenter(function(){
var self = $(this),
url = self.data('bg-url');
$('body').css('background-image', url);
});
});
CSS:
body {
background-color: pink;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
EDIT TO ENABLE BACKGROUND IMAGE SUPPORT
Check out this fiddle. It's not the nicest solution but it works as expected.
For each link it creates a DIV with a background-image. After this the corresponding div is shown based on the hovered link.
HTML
One
Two
Three
Four
CSS
.bgholder {
-webkit-transition:opacity 1s;
-moz-transition:opacity 1s;
-o-transition:opacity 1s;
transition:opacity 1s;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-size: contain;
background-repeat: no-repeat;
}
a {
position: relative;
z-index: 2;
}
JS
$(document).ready(function(){
$('a').each(function(i){
var self = $(this),
bg = self.data('bg'),
container = '<div class="bgholder" id="back-'+i+'" style="background-image: url('+bg+');"></div>';
self.data('trigger', 'back-'+i);
$('body').append(container);
});
$('a').mouseenter(function(){
var self = $(this),
cont = self.data('trigger');
$('.bgholder').css('opacity',0);
$('#'+cont).css('opacity',1);
});
});

Scrolling tile images with css

I wish to have a row of 3 images which will contain around 10 images per row.
The image dimensions are 270x270px and should animate like you'd imagine clouds floating from right to left on the screen.
I'd like the top row of images to go right to left, the middle the opposite direction and the bottom the same as the top but at different intervals.
I'm not 100% sure on how to accomplish this and I'm new to CSS animations.
I've tried floating list items inside of a but the browser appears to clip the ul inside of the window and doesn't let it float off the screen.
see image for details
The images should loop and continue to show a flow of images without any interruption in animation or placement.
Any help getting started would be much appreciated.
G

Do you mean something like this jsFiddle ?
HTML
<div class="container">
<div class="rowContainer">
<div class="row rtl">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
</div>
</div>
<div class="rowContainer">
<div class="row ltr">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
</div>
</div>
<div class="rowContainer">
<div class="row rtl">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
</div>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
#-webkit-keyframes scrollRtL {
0% { transform: translate(0, 0); }
100% { transform: translate(-50%, 0); }
}
#keyframes scrollRtL {
0% { transform: translate(0, 0); }
100% { transform: translate(-50%, 0); }
}
#-webkit-keyframes scrollLtR {
0% { transform: translate(-50%, 0); }
100% { transform: translate(0, 0); }
}
#keyframes scrollLtR {
0% { transform: translate(-50%, 0); }
100% { transform: translate(0, 0); }
}
html, body, .container {
overflow: hidden;
width: 100%;
height: 100%;
}
.rtl {
-webkit-animation: scrollRtL 5s linear infinite;
animation: scrollRtL 5s linear infinite;
}
.ltr {
-webkit-animation: scrollLtR 5s linear infinite;
animation: scrollLtR 5s linear infinite;
}
.rowContainer {
position: relative;
height: 280px;
}
.row {
position: absolute;
white-space: nowrap;
font-size: 0;
}
.cell {
font-family: verdana;
display: inline-block;
font-size: 36px;
width: 270px;
height: 270px;
background-color: red;
color: white;
margin: 5px;
}
Only problem is that I had to place all elements twice in a row so it looks like an infinite scroll...

First you need a wrap div, which its width is three times of your image, so that it can display 3 of your images at a time.
Set the wrap div style: position:relative; overflow:hidden;
Create row div, 10 images in that div, and use 'position:abolute;left:0;' , then you can use css3 transform to move it.

Do you mean something like this?
<marquee behavior="scroll" direction="left" scrollamount="10"><img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee>
http://jsfiddle.net/mLbkcwmf/