Develop Reference

How to animate 2 images when showing one hide other one in css animation?

image link which ı want to create
web page link which i look for
I want to create an animation area in my web page . I have a reference web page above and i want to make same animation area . when one images slide down other one is hidden and wait its turn . i used css keyframes for this but i could not get exactly what i want .
<div class="col-log">
<img src="/img/tuvnord.png" class="resms1" alt="dd">
<img src="/img/ce.png" class="resms2" alt="">
</div>
i have col-log divs like this which fills my card area like showed above image link.
.gelisme2 .resms1 {
position: absolute;
animation-name: pic1;
animation-iteration-count: infinite;
animation-duration: 3s;
}
.gelisme2 .resms2 {
position: absolute;
animation-name: pic2;
animation-iteration-count: infinite;
animation-duration: 3s;
}
#keyframes pic1 {
0% {
opacity: 0;
transform: matrix(1, 0, 0, 1, 0, -50);
}
100% {
opacity: 0;
transform: matrix(1, 0, 0, 1, 0, 50);
}
}
#keyframes pic2 {
0% {
opacity: 0;
transform: matrix(1, 0, 0, 1, 0, 50)
}
100% {
opacity: 1;
transform: matrix(1, 0, 0, 1, 0, 0)
}
}

You are correct that you can do the whole thing with css / keyframes. I've got the basics roughed out for you, but you'll need to tweak the timings. Everything you need to do that is on this page:
https://www.w3schools.com/css/css3_animations.asp
In the below snippet, the outer container (.flex-row) is set to display:flex to show the immediate child containers (.flex-cell) side by side. The flex-cell containers are then set to display:block so that their contents are not side-by-side. Within each flex-cell, the logo divs are in pairs, stacked one above the other (which makes it easier to do the slideUp / slideDown animations).
The snippet uses one #keyframes definition for all "top" logo divs, and one #keyframes definition for all bottom logo divs. You might find it easier to give each logo div (dimg) its own keyframe definition. Whatever is easiest. Get it working first, then streamline it second - it's too easy to get confuzzled when trying to do both at the same time. Start out with just one logo pair, get that couple working the way you want, then add another flex-cell.
Again, the timing isn't quite right with the below example but I'm sure you can manage to tweak it to perfection. (Note that the first one (timing) is different from the other two. I started playing with the timing, to make the top/bottom changes overlap a bit, but decided that you'll be fine from this point forward. That's why the first pair looks quite different.)
.flex-row{display:flex;}
.flex-cell{display:block;padding:5px 20px;max-height:45px;border:1px solid #ddd;}
img{width:70px;height:40px;}
.twoA, .twoB, .twoC{opacity: 0;}
.oneA, .oneB, .oneC{opacity: 1;}
.oneA{
transition: transform .3s;
animation: doOne 6s linear 0s infinite forwards;
}
.oneB{
transition: transform .3s;
animation: doOne 6s linear .5s infinite forwards;
}
.oneC{
transition: transform .3s;
animation: doOne 6s linear 1s infinite forwards;
}
.twoA{
transition: transform .3s;
animation: doTwo 6s linear 2s infinite forwards;
}
.twoB{
transition: transform .3s;
animation: doTwo 6s linear 3.5s infinite forwards;
}
.twoC{
transition: transform .3s;
animation: doTwo 6s linear 4s infinite forwards;
}
#keyframes doOne {
0% {opacity:0; transform: translate(0, -15px);}
15%{opacity:0;transform: translate(0, -15px);}
18%{opacity:1;transform: translate(0, 0px);}
40%{opacity:1;transform: translate(0, 0px);}
45%{opacity:1;transform: translate(0, 0px);}
50%{opacity:0;transform: translate(0, 25px);}
100%{opacity:0;transform: translate(0, 25px);}
}
#keyframes doTwo {
0% {opacity:0; transform: translate(0, 0px);}
15%{opacity:0;transform: translate(0, 0px);}
18%{opacity:1;transform: translate(0, -40px);}
40%{opacity:1;transform: translate(0, -40px);}
45%{opacity:1;transform: translate(0, -40px);}
50%{opacity:0;transform: translate(0, 0px);}
100%{opacity:0;transform: translate(0, 0px);}
}
<div class="flex-row">
<div class="flex-cell">
<div class="dimg oneA"><img src="https://business.exetel.com.au/images/partners/Optus.svg" /></div>
<div class="dimg twoA"><img src="https://business.exetel.com.au/images/partners/AAPT.svg" /></div>
</div><!-- .flex-cell -->
<div class="flex-cell">
<div class="dimg oneB"><img src="https://business.exetel.com.au/images/partners/Megaport.svg" /></div>
<div class="dimg twoB"><img src="https://business.exetel.com.au/images/partners/Cisco.svg" /></div>
</div><!-- .flex-cell -->
<div class="flex-cell">
<div class="dimg oneC"><img src="https://business.exetel.com.au/images/partners/Cirrus.svg" /></div>
<div class="dimg twoC"><img src="https://business.exetel.com.au/images/partners/Opticomm.svg" /></div>
</div><!-- .flex-cell -->
</div>

you could add an "animation-delay" to the correct class you want to keep it waiting if the other animation is done

When working with css animations, is there is any way to make successive animations repeat infinitely in the given order

When I was working with CSS animations, I had to make two animations successive, but as soon as I did that, I just remembered that the animations must repeat infinitely. Is there is any way to make them repeat infinitely in the same order without making the animations one by merging keyframes, using only CSS?
If there isn't, how could I do it with JavaScript?
I tried re-invoking the animation in the last keyframe of the last animation but that didn't work because you can't animate animation.
.div{
animation: spin 1.6s ease-in-out 0s 1 normal running,
rotate 1s ease-in-out 1.5s 1 normal running;
}
#keyframes spin {
from {
transform: rotateX(0deg);
}
99% {
transform: rotateX(360deg);
}
100% {
transform: rotateX(360deg);
animation: spin 1.6s ease-in-out 0s 1 normal running,
rotate 1s ease-in-out 1.5s 1 normal running;
}
}
#keyframes rotate {
from {
transform: rotatez(0deg) rotatey(0deg);
}
to {
transform: rotatez(-33deg) rotatey(-37deg);
;
}
}

Simply create a new animation based on your requirements:
.box{
background:red;
width:100px;
height:100px;
animation: spin 2.6s ease-in-out infinite;
}
#keyframes spin {
0%{
transform: rotateX(0deg);
}
61.54% { /*1.6s */
transform: rotateX(360deg) rotatez(0) rotatey(0) translateZ(0);
}
100% {
transform: rotateX(360deg) rotatez(-33deg) rotatey(-37deg) translateZ(1000px);
}
}
<div class="box">
</div>

waitForImages Plugin - not waiting

My jquery/js code is not waiting for images loaded to fade out. What is the problem?
$('#entry').css('background-image','url(../img/backg3.jpg)').waitForImages(function() {
$('#load').fadeOut(1000);
$('.spinner').fadeOut(1000);
});
/*******************
Loading
*********************/
#load {
position:absolute;
height:100vh;
width:100vw;
background-color:#ddd;
z-index:1000;
/*-moz-transition:all 2s ease-out;
-webkit-transition:all 2s ease-out;
-webkit-transition:all 2s ease-out;
transition:all 2s ease-out;*/
}
#-o-keyframes spin {
100%{
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes spin {
100%{
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin {
100%{
transform: rotate(360deg);
}
}
.spinner {
position:absolute;
top:45vh;
left:45vw;
width:5vh;
height:5vh;
border: 6px solid #F90;
border-left-color:#FC3;
border-bottom-color:#FF6;
border-right-color:transparent;
border-radius:100%;
animation: spin 400ms infinite linear;
margin: auto;
}
<div id="load">
<div class="spinner"></div>
</div>
So I want while my background image is loading to hold the spinner, but it fade outs without image.
Page - http://sarosacramento.com/
Plugin - https://github.com/alexanderdickson/waitForImages

From their github page, it looks like you're supposed to apply .waitForImages() to an element selector (which either has image children or images in its CSS). In your code, instead of applying it to the selector, you're first adding CSS, then trying to apply .waitForImage(), which won't work, since the .css() doesn't return a selector. Try instead:
$('#entry').waitForImages(function () {
$('#load').fadeOut(1000);
$('.spinner').fadeOut(1000);
});
for the JS and just put the background image in normal CSS:
#entry {
background-image: url(../img/backg3.jpg);
}
(If you must set it via JS, do that before applying .waitForImages() to $("entry"):
$('#entry').css('background-image','url(../img/backg3.jpg)');
$('#entry').waitForImages(function () { ...
though I haven't actually tested this.)
Here's an example: http://jsfiddle.net/aq9t6kvk/2/. (It mostly uses your code, but I used some different images that wouldn't be in our caches already. But since the first one might already be loading while JSFiddle is "initializing the awesome", there are some backups for subsequent "Run"s.)

Delay Keyframes per defined time and keep opacity 0 after animation

I've been using HTML5 and Css3 to build an animated banner, but I have a few issues I can't find a work around for at the moment.
Heres a quick bit of code to use for an example, imagine this is a div layer with an image assigned to it.
First off is Opacity, it works until the end of the timeline animation then re-appears, is there a css way to get round this or would I have to use javascript?
Secondly is transition delay, I would of thought I could do a keyframe delay and freeze it for a few seconds inbetween each transition, but it never takes effect. If anyone can help I'd aprpeaciate it!
#-webkit-keyframes animation {
0% {
opacity:1;
-webkit-animation-timing-function: ease;
-webkit-transform: translateY(0px);
}
50% {
-webkit-transition-delay:10s;
opacity:1;
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateY(300px);
}
100% {
opacity:0;
-webkit-animation-timing-function: ease-inout;
-webkit-transform: translateY(900px);
}
}
#animation {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: animation
}
FIrst off is the delay command, Transition-delay and animation-delay, both
*******Update************
Opacity is solved, to get it to finish after the animation, have your First frame 0% set to opacity 0. If that's a problem set a frame to 1% set it to opacity 1.
Then add forwards on the end of your animation i've been doinbg it shorthand so something like this.
#bannerImg {
-webkit-animation: bannerImg-animation1 3s 0s 1 ease-in-out forwards}

I couldn't find a way to make the code nice to look at but since starting delays and animations from within an animation itself does not seem to work I stuck the following together:
#-webkit-keyframes animation {
0% {
opacity:1;
-webkit-animation-timing-function: ease;
-webkit-transform: translateY(0px);
}
18.75% {
opacity:1;
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateY(300px);
}
81.25% {
opacity:1;
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateY(300px);
}
100% {
opacity:0;
-webkit-animation-timing-function: ease-inout;
-webkit-transform: translateY(900px);
}
}
#animation {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 16s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: animation;
}
JSFiddle
This solution just uses 18.75% and 81.25% as markers for the delay, changing nothing during that time (10 seconds).

How can I translate this CSS3 to Javascript?

I have this:
#-webkit-keyframes spin {
from { -webkit-transform: rotateY(0deg); }
to { -webkit-transform: rotateY(-360deg); }
}
#share {
-webkit-animation: spin 10s infinite linear;
}
How can I replicate this behavior using Javascript?

At least for the second part, you can do:
$('#share').css('-webkit-animation', 'spin 10s infinite linear');