CSS3 Transitions - Animate div contents

HTML & CSS
1

Hi,

Hope someone can help me out.

Is it possible to have a div with variable width and animate the movement of the contents when the container is resized?

If that doesn’t make sense then the effect I’m looking for is something similar to this.
Isotope

Resize the browser and you’ll see the contents animate into their new positions.
Basically I’d like to do this with some images inside a div.

Is it possible?
Thanks in advance for any help offered.

2

There seem to be many “layout modes” in that demo so one of them must be close to what you want.

3

Hi,

This is quite close to what you are asking except that the elements are moved by absolute positioning depending on the window width.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">

#outer{
	width:1000px;
	margin:auto;
	border:1px solid #000;
	padding:10px;
	overflow:hidden;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
	text-align:center;
    position:relative;
	height:400px;
}
p{
	width:100px;
	height:100px;
	background:red;
	display:inline-block;
	margin:20px;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
	position:absolute;
	left:10px;
	top:10px;
}
.a{left:10px}
.b{left:120px;background:blue}
.c{left:240px;background:yellow}
.d{left:360px;background:green}
.e{left:10px;top:140px;background:teal}
.f{left:120px;top:140px;background:orange}
.g{left:240px;top:140px;background:black}



@media screen and (max-width:1100px) { 
	#outer{width:1000px}
    .a {left:240px;top:140px}
	.b{left:240px}
	.c{left:120px}
	.d{left:10px;}
	.e{left:360px;top:10px}
	.f{left:360px}
	.g{left:10px}
}

@media screen and (max-width:1000px) { 
	#outer{width:900px}
    .a {left:10px;top:140px}
	.b{left:120px}
	.c{left:10px}
	.d{left:240px;}
	.e{left:360px;top:140px}
	.f{left:240px}
	.g{left:120px}
}
@media screen and (max-width:900px) { 
	#outer{width:800px}
    .a {left:10px;top:140px}
	.b{left:240px}
	.c{left:120px}
	.d{left:10px;}
	.e{left:20px;top:10px}
	.f{left:240px}
	.g{left:10px}
}
@media screen and (max-width:800px) { 
	#outer{width:700px}
    .a {left:360px;top:140px}
	.b{left:240px}
	.c{left:120px}
	.d{left:120px;top:140px}
	.e{left:10px;top:10px}
	.f{left:360px;top:10px}
	.g{left:10px}
}





</style>
</head>

<body>
<div id="outer">

<p class="a"></p><p class="b"></p><p class="c"></p><p class="d"></p><p class="e"></p><p class="e"></p><p class="f"></p><p class="g"></p>


</div>
</body>
</html>
4

Thanks again, appreciate you posting the code.

Tried playing around with both of those and not quite there. So annoying that the link I posted does nearly all of what I need apart from centering the content within its container. There must be a way of doing that!

Thanks again.

5

Hi,

Thanks very much for the reply.

Hmm, I get what you’re saying but maybe there’s no easy way to do it then. Not ideal making those triggers in js.
Unless anyone else can suggest otherwise I may have to rethink things.

Thanks again for replying!

6

Hi,

You could do the animations with CSS3 but you’d have to set up the logic and triggers with js as in that example you linked to.

The only way I could think of doing something vaguely similar would be to use media queries to change the width (or position) of elements as the window is resized.

Something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">

#outer{
	width:60%;
	margin:auto;
	border:1px solid #000;
	padding:10px;
	overflow:hidden;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
	text-align:center;

}
p{
	width:300px;
	height:300px;
	background:red;
	display:inline-block;
	margin:20px;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}
#outer:hover p{margin:40px}


@media screen and (max-width:1200px) { 

    p { 
        width:400px;
		height:400px;
		background:yellow; 
    }
}

@media screen and (max-width:1000px) { 

    p { 
        width:200px;
		height:200px;
		background:blue; 
    }
}
@media screen and (max-width:800px) { 
 
    p { 
        width:100px;
		height:100px;
		background:green; 
    }
}

</style>
</head>

<body>
<div id="outer">

<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>


</div>
</body>
</html>