CSS best transition effect like on selection make div bigger

<html>

<head>

<style type=”text/css”>

html {

background: #ff6461;

}

 

body {

position: absolute;

left: 50%;

top: 50%;

height: 214px;

width: 336px;

margin: -107px -168px;

}

 

input {

visibility: hidden;

}

 

label {

position: absolute;

left: 0;

right: 228px;

background: white;

cursor: pointer;

-webkit-transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s, bottom 0.33s;

transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s, bottom 0.33s;

}

#li0 + label {

top: 14px;

bottom: 164px;

}

#li1 + label {

top: 64px;

bottom: 114px;

}

#li2 + label {

top: 114px;

bottom: 64px;

}

#li3 + label {

top: 164px;

bottom: 14px;

}

:checked + label {

left: 122px;

right: 0;

top: 14px !important;

bottom: 14px !important;

-webkit-transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s 0.66s, bottom 0.33s 0.66s;

transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s 0.66s, bottom 0.33s 0.66s;

}

</style>

</head>

<body>

<input id=”li0″ name=”foo” type=”radio” />

 

<label for=”li0″></label><input checked=”” id=”li1″ name=”foo” type=”radio” />

 

<label for=”li1″></label>

 

<input id=”li2″ name=”foo” type=”radio” />

 

<label for=”li2″></label>

 

<input id=”li3″ name=”foo” type=”radio” />

 

<label for=”li3″></label>

 

<input id=”li4″ name=”foo” type=”radio” />

 

<label for=”li4″></label>

 

<input id=”li5″ name=”foo” type=”radio” />

 

<label for=”li5″></label>

 

</body>

 

</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s