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

Safari 12 css animations not working well

I'm trying to animate a list of elements to slide in one after the other when rendered into the page.
Everything works well in Chrome and Firefox, even in Safari 11 work well, but safari 12 is not doing the animation well.
As shown in the following image, all items should be aligned to the top when the animation is completed, but for some reason only in Safari 12, the items are randomly rendered. In addition to that, the mouse over on the button is off.
You can take a look at the problem here: https://codepen.io/crysfel/pen/GwoQxE (Make sure to open the link with safari 12)
I think the css is pretty standard:
#keyframes slideIn {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slide-in {
opacity:0;
transform: translateY(60px);
animation: slideIn ease 1;
animation-fill-mode: forwards;
animation-duration: 175ms;
}
And a simple javascript to animate the items one after the other:
function animateIn() {
$('ul li').each(function(index) {
$(this).removeClass('slide-in');
setTimeout(() => {
$(this).addClass('slide-in');
}, 50 * index)
})
}
$(() => {
animateIn();
$('#show').click(function() {
animateIn();
});
});
EDIT:
I've fixed the issue: It turns out all I had to do was removing transform: translateY(60px); from slide-in. Apparently safari was using that style at the end of the animation overwriting the final value. It's very weird, because visually looks wrong but the active zones and all are fine.

You probably need to add a prefix to keyframes and animation for safari. Use something like this:
#keyframes slideIn {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#-webkit-keyframes slideIn {
from {
opacity: 0;
-webkit-transform: translateY(60px);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
}
}
.slide-in {
opacity:0;
transform: translateY(60px);
-webkit-transform: translateY(60px);
animation: slideIn ease 1;
-webskit-animation: slideIn ease 1;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-duration: 175ms;
-webkit-animation-duration: 175ms;
}
A helpful tool to use is shouldiprefix.com

css keyframe transition best way to do

Right now I am using Rico St.Cruz brillant working query.transit library but now I have to change some things to do with classes instead though not being this firm in CSS transitions. I tried to
replace:
JS:
$("#target_element").mouseenter( function() {
$("#arr_left")
.transition( { x: 3 }, 300, 'easeOutSine' )
.transition( { x: 0 }, 300, 'easeInSine' );
};
}
with:
JS:
$("#target_element").mouseenter( function() {
$("#arr_left").addClass('hint');
}
CSS:
#arr_left.hint {
-webkit-animation: hint_left 600ms;
-moz-animation: hint_left 600ms;
-o-animation: hint_left 600ms;
animation: hint_left 600ms;
}
#keyframes hint_left {
0%, 100% {
-webkit-transform: translate(0);
-moz-transform: translate(0);
-o-transform: translate(0);
transform: translate(0);
-webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); /* easeOutSine */
animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}
50% {
-webkit-transform: translate(3px);
-moz-transform: translate(3px);
-o-transform: translate(3px);
transform: translate(3px);
-webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); /* easeInSine */
animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715) ;
}
}
but this new code does not work.
1) What I am doing wrong here?
2) What is the shortest code (browser compatible) to reach this?
Addition: I’d like to keep the "hint" class generic to address via JS with each arrow has a specific own translation property. Thanks so much in advance!
EDIT:
http://jsfiddle.net/bg7w6jmh/61/
I added a fiddle. Note: I need the extra container for the arrow because it’s animated (rotated) in other places.
The aim is to make the little arrow smoothly move to the left 3px and back in to indicate the target_element being animated on click or swipe. For the values and easing see the keyframes. Thanks for help!

Happens to be ok now. While I was working endlessly on my fiddle I recognized that I missed a round bracket at the end of my event declaration…

CSS rotate and translate transform give unexpected results

I've checked CSS-TRICKS and any other site Google offered me up to page two of their list of links, so my only assumption is I'm misunderstanding how this works or doing it wrong.
What I want is for an image to slide in from its current position to the absolute center of the page. As it slides, I want it to rotate at its center, spinning like a perfectly-balanced wheel. As it slides and rotates, I want it to appear to come towards the user. I want to do this while still keeping the image flat and unskewed.
What it does instead is rotate the image clockwise around and down back towards the left side of the page and off of it.
Here's my code (borrowed from animate.css and changed to suit my needs):
#-webkit-keyframes rotOutZm {
0% {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
opacity: 0;
}
}
#keyframes rotOutZm {
0% {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
opacity: 0;
}
}
.rotOutZm {
-webkit-animation-name: rotOutZm;
animation-name: rotOutZm;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Currently, my code does not take into account the starting point of the image, which will be wrong/messy when I have a row of images. Is there a way to dynamically figure from their starting locations, if they need to slide up to the center, slide down to the center, etc? I'm pretty sure this is a job for JavaScript or jQuery but I'm not sure how to code that.
Am I simply expecting too much of the animation functions? Should I simplify my design to not do this due to complexity?
EDIT: Here is a JSFiddle showing the code in action. It's an image with a small delay to the animation so you can see the image and then watch how it animates to see my problem. My apologies for not providing this sooner.
JSFiddle

Sure you can do it:
FireFox Live example
#keyframes rotOutZm {
100% {
margin: -50px; /* image is 100x100px size so... */
transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
opacity: 0;
}
}
.rotOutZm {
transform-origin: center;
animation: rotOutZm 2s forwards 0.5s;
}
P.S: Expand the above also for -webkit- and other vendor prefixes
vw and vh are the Viewport sizes. 50vh is half the viewport height
Note that is extremly important the order you place your stack of transform, i.e: if you move translate3d to the end or the transform rule you might get unwanted results.

AngularJs animations not consistent when animating using transforms

I have an AngularJS animation set up for sliding in panels of an ng-switch directive using the latest version of Angular (1.2.9). I am noticing curious behavior if I try to animate the position using "transform: translate(0,0);" instead of just the "left" attribute. When using translate, the animation sometimes works properly and sometimes not (I'd say it's about 50/50). However, if I animate the left attribute, it works correctly 100% of the time.
The CSS for the animation I am using is
.slide-animation.ng-enter,
.slide-animation.ng-leave {
position: absolute;
-webkit-transition: all ease-in-out 1s;
-moz-transition: all ease-in-out 1s;
-o-transition: all ease-in-out 1s;
transition: all ease-in-out 1s;
}
.slide-animation.ng-enter {
-webkit-transform: translate(-125%, 0);
-ms-transform: translate(-125%, 0);
transform: translate(-125%, 0);
}
.slide-animation.ng-enter.ng-enter-active,
.slide-animation.ng-leave {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.slide-animation.ng-leave.ng-leave-active {
-webkit-transform: translate(125%, 0);
-ms-transform: translate(125%, 0);
transform: translate(125%, 0);
}
Here is a fiddle to demonstrate the issue I am having: http://jsfiddle.net/HXACU/5/
I wanted to use translate because it gives significantly better performance than animating the left attribute on mobile devices. Do I have something wrong, is this a bug in Angular, or should I give up and just animate with "left"?

I think it's a rendering time race - caused by the 125%. I don't think it knows what 125% is until it's rendered, I've seen similar things before.
For argument sakes I replaced all % with px equivalents here: http://jsfiddle.net/27te5/1/ and it appears to be more stable (i can't break it)
.slide-animation, .slide-animation-transform {
width: 96px;
}
.slide-animation.RL.ng-enter, .slide-animation.LR.ng-leave.ng-leave-active {
left:150px;
}
/*etc. etc.*/
I'm sure you would rather % values but i hope it helps in any case.