Gcyrillus CSS transition , is there any difference if drived by js ?..

dabblet.css

/* Gcyrillus CSS transition , is there any difference if drived by js ?.. 
nop , why should pixels and time be something else  */
#accordion1 {height:240px;
width:840px;
list-style-type:none;border:solid hsla(70, 67%, 53%, 0.75) 2px;
padding:0;
margin:1em auto;
overflow:hidden;
position:relative;
}
#accordion1 li {
float:left;
position:relative;
display:inline-block;
overflow:hidden;
width:40px;
height:240px;
transition:ease-out 0.5s;
outline:0;
z-index:2;
margin:0;
padding:0;

}

#accordion1 li:first-child {width:720px;
transition:ease-out 0.5s;
top:0;
left:0;
z-index:1;
}
#accordion1 li:before {
content:attr(title);
border-top:solid   1px hsla(70, 67%, 53%, 0.75) ;
color:white;
height:40px;
width:241px;
position:absolute;
bottom:0;left:1px;
background:#016132;
transform:rotate(-90deg);
transform-origin:20px 21px ;
line-height:40px;
text-indent:3em;
font-size:1em;
letter-spacing:1px;
text-transform:uppercase;
}
#accordion1 li:nth-child(2):before { background:#5F9A29;}
#accordion1 li:nth-child(3):before { background:#92BD25;}
#accordion1 li:nth-child(4):before { background:#B80C46;}
#accordion1 li:after {
content:' \25b4 ';
position:absolute;
bottom:0;
left:0;
width:40px;
text-align:center;
line-height:40px;
color:white;
font-size:1.2em;
z-index:1;
}
#accordion1 figure {margin:0;padding:0;display:block;}
#accordion1 li:hover:after{
content:' \25b8 ';
}
#accordion1:hover li {width:40px;transition:ease-out 0.5s;}
#accordion1 li:hover{width:720px;transition:ease-out 0.5s;}
#accordion1 li img {position:absolute;left:40px;top:0;}
#accordion1 li figcaption {
position:absolute;
bottom:-3.5em;
left:40px;
right:0;
width:680px;
color:white;
padding:0;
text-shadow:1px 1px 1px black;
text-indent:1em;
transition:1s;
}
#accordion1 a {color:white;}
#accordion1 li:hover figcaption {
bottom:0;
transition:ease-in 0.4s 0.3s;
background:rgba(0,0,0,0.5);

}
#accordion1 li figcaption h2 , #accordion1 li figcaption p {
display:inline-block;
font-size:1em;
margin:0; 
height:3.5em;
line-height:2em;
transition:0.1s;
}
#accordion1 li:hover figcaption h2 , #accordion1 li:hover figcaption p {
transition:ease 2s 0.2s;
height:2em;
}
#accordion1 li[title="Video"] {overflow:visible;}
#accordion1 li[title="Video"] figure {padding-left:40px;}
#accordion1 li[title="Video"] figcaption {position:static;height:240px;width:auto;background:url(http://www.geertdedeckere.be/shop/accordionza/download/accordion1/images/digital-noise.png) ;
background-size:cover;padding:0 10px;overflow:hidden;}

#accordion1 li[title="Video"] figcaption  h2 {font-size:2.5em;color:gray}

#accordion1 li[title="Video"] figcaption  h2, #accordion1 li[title="Video"] figcaption  p {display:block;transition:0.1s;}

dabblet.html

<h1>Version CSS</h1>
<ul id="accordion1">
		<li tabindex="0" title="Tiger says hi !">
			<figure>
				<a class="image" href="http://www.flickr.com/photos/30775272@N05/2884963755/"><img alt="Tiger" width="680" height="240" src="http://www.geertdedeckere.be/shop/accordionza/download/accordion1/images/tiger.jpg" /></a>
				<figcaption>
					<div class="caption" >
					<h2>Sumatran Tiger</h2> 
					<p> A great shot by <a href="http://www.flickr.com/photos/30775272@N05/2884963755/" rel="cc:attributionURL">Brimac The 2nd</a>.</p>
					</div>
				</figcaption>
			</figure>
		</li>
		<li tabindex="0" title="marco Flower">
			<figure>
				<a class="image" href="http://www.flickr.com/photos/petergorges/3787848361/"><img alt="Flower" width="680" height="240" src="http://www.geertdedeckere.be/shop/accordionza/download/accordion1/images/flower.jpg" /></a>
				<figcaption>
					<div class="caption" >
					<h2>Macro Flower</h2> 
					<p> Awesome nature captured by <a href="http://www.flickr.com/photos/petergorges/3787848361/" rel="cc:attributionURL">Maschinenraum</a>.</p>
				</div>
				</figcaption>
			</figure>
		</li>
		<li tabindex="0" title="Butterfly">
			<figure>
				<a class="image" href="http://www.flickr.com/photos/uajith_set1/2632346909/"><img alt="Butterfly" width="680" height="240" src="http://www.geertdedeckere.be/shop/accordionza/download/accordion1/images/butterfly.jpg" /></a>
				<figcaption>
					<div class="caption" >
					<h2>Gorgeous Butterfly</h2> 
					<p> Wow! Simply an amazing shot by <a href="http://www.flickr.com/photos/uajith_set1/2632346909/" rel="cc:attributionURL">Ajith</a>.</p>
				</div>
				</figcaption>
			</figure>
		</li>
		<li tabindex="0" title="Video">
			<figure>
				<object style="float:left;" width="427" height="240">
					<param name="allowfullscreen" value="true" />
					<param name="allowscriptaccess" value="always" />
					<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=1517843&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=b80c46&amp;fullscreen=1" />
					<embed src="http://vimeo.com/moogaloop.swf?clip_id=1517843&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=b80c46&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="427" height="240">
					</embed>
				</object>
					<figcaption>
					<h2>Whoa!</h2>
					<p>
						Embedding video is possible too?
						Sure. Your slides can contain any HTML you want.
						Nice, huh?
					</p>
				</div>
				</figcaption>
			</figure>
		</li>
	</ul>
	<h2>Version jQuery</h2>
<a href="http://codecanyon.net/item/accordionza-jquery-plugin/full_screen_preview/101685" target="_blank">Version original du menu </a>.

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}