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>

CSS hover with mouse in translateXY

Thank you for reading my question
.ab {
position:absolute;left:50%;top:50%
}
.logo_img {
width:100px;
}
.logo_img:hover {
-webkit-animation: hvr 0.5s ease-out 1 0s;
-ms-animation: hvr 0.5s ease-out 1 0s;
animation: hvr 0.5s ease-out 1 0s;
}
#keyframes hvr {
0% { -webkit-transform: translateX(0px);transform: translateX(0px); }
50% { -webkit-transform: translateX(900px);transform: translateX(900px);}
51% { -webkit-transform: translateX(-900px);transform: translateX(-900px);}
100% {-webkit-transform: translateX(0px);transform: translateX(0px);}
}
<div class="ab"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="logo_img" /></div>
Problem is when mouse goes on it, and image moves, then mouse is not on image and sometimes hover does not work!
Is there any way to do animation like this hover but if mouse is not on image... it keeps going?
Is it possible to user jQuery hover and add class on hover? And delete that class after animation ends?

You can create a container div for the image, wich always stays in the same place, and put the image inside this div. Then instead of checking, if the mouse is over the image, you can check if it is over the div.
#container {
border: 1px solid black;
}
.logo_img {
width:100px;
margin-left: calc(50% - 50px);
}
#container:hover .logo_img {
-webkit-animation: hvr 0.5s ease-out 1 0s;
-ms-animation: hvr 0.5s ease-out 1 0s;
animation: hvr 0.5s ease-out 1 0s;
}
#keyframes hvr {
0% { -webkit-transform: translateX(0px);transform: translateX(0px); }
50% { -webkit-transform: translateX(900px);transform: translateX(900px);}
51% { -webkit-transform: translateX(-900px);transform: translateX(-900px);}
100% {-webkit-transform: translateX(0px);transform: translateX(0px);}
}
<div id="container">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="logo_img">
</div>

var duration = 500;
$('img').mouseenter(function() {
$(this).addClass('hvr').delay(duration).queue(function() {
$(this).removeClass('hvr');
$(this).dequeue();
});
});
CODEPEN

If you mean to make animation work without hover then add this animation-iteration-count to infinite.
.logo_img {
-webkit-animation: hvr 5s ease-out;
-ms-animation: hvr 5s ease-out;
animation: hvr 5s ease-out infinite;
}
Updated another answer using jQuery,
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
$(document).ready(function(){
$("img").on("mouseenter",function(){
$(this).addClass("logo_img");
});
$("img").on("mouseleave",function(){
$(this).removeClass("logo_img");
});
});

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).