I recently implemented a transition effect from height: 0, width: 0 to a specific width on my webpage. It's working perfectly, transitioning from the bottom left to the top right as intended. I started thinking, what if I change the float property to 'right'? Would that make the transition go from the bottom right to the top left instead? Is there a way to achieve this kind of transition?
Here is the CSS code:
.ablauftext{
height:0;
width:0;
position:absolute;
overflow:hidden;
background-color:white;
transition: all 1s ease;
-webkit-transition: all 1s ease;
bottom:90px;
}
.active{
height:400px;
width:400px;
}
And here is the JavaScript code:
$('#planung').click(function(){
if(!$current.is('#planungtext')){
$($current).removeClass('active');
setTimeout(function(){$('#planungtext').addClass('active')}, 1000);
$current = $('#planungtext');
}
});
I have assigned IDs to my elements based on floats, so I believe additional CSS modifications are not necessary in this case.