Edit 3 Actually, I didn't need to be messing with the visibility/ opacity at all... so I removed those lines (as shown in edit 2)... added animation-play-state: paused/ running....
Got the effect I wanted...
Edit 2: Thanks Gineto for the idea! Made some changes (see below):
.logos2{
position: relative;
float: right;
height:100%;
right:75px;
animation: move 1s;
animation-play-state:paused;
border: 1px solid #000;
}
and in jQuery:
jQuery(document).ready(function(){
jQuery(".logos").animate({height: +800}, 500);
jQuery(".logos").promise().done(function(){
jQuery(".logos2").css({"animation-play-state":"running"});
});
});
Edit: Have come somewhat close by changing jQuery:
jQuery(document).ready(function(){
jQuery(".logos").animate({height: +800}, 500);
jQuery(".logos").promise().done(function(){
jQuery(".logos1").addClass('logos2');
});
});
but adding a class dynamically shift are logo a lot...
I want my CSS animation to be hidden at first (letting another animation run) then after to have the initial animation to be visible.
Here is my CSS code:
.logos{
position: absolute;
width:100vw;
margin:0 auto;
height:0vh;
bottom: 0;
}
.logos1{
position: relative;
float: right;
height:100%;
top: 100px;
right:75px;
visibility: hidden;
border: 1px solid #000;
}
@keyframes move{
0%{right:-100px;}
50%{right:90px;visibility: hidden;}
100%{right:75px;visibility: visible}
}
.logos2{
position: relative;
float: right;
height:100%;
top: 100px;
right:75px;
animation: move 1.5s;
animation-delay: 1s;
border: 1px solid #000;
}
and my jQuery
jQuery(document).ready(function(){
jQuery(".logos").animate({height: +800}, 500);
jQuery(".logos1").height(100);
jQuery(".logos1").promise().done(function(){
jQuery(".logos1").addClass('logos2');
jQuery(".logos2").removeClass('logos1');
jQuery(".logos2").promise().done(function(){
jQuery(".logos2").css('visibilty','visible');
})
})
});
what happens when I run the jquery is that the animation is visible at start...
Anyone know how to resolve?
