Flexbox animation
I want to animate elements flexbox
as they are transform
from row to column by resizing the browser window.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
display: flex;
flex-direction: row;
justify-content: space-around;
}
div {
background-color : red;
width:50px;
}
@media (max-width:500px) {
body {
flex-direction: column;
}
}
</style>
<body>
<div>
<p>1st block</p>
</div>
<div>
<p>2nd block</p>
</div>
<div>
<p>3rd block</p>
</div>
<div>
<p>4th block</p>
</div>
</body>
</head>
</html>
Here I have 4 blocks that I want to make responsive, but some animations use the property transition
. Use transition
and explain where I can place this piece of code here.
source to share
You cannot do this with just CSS - flex-direction
is not animatable
property: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction .
Check out the list of CSS3 animation properties: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties .
source to share