Demo Pure css accordion (css3-animation)

Final effect

Pure css accordion is like kwicks but without javascript !

It works with chrome and safari.

The CSS

@-webkit-keyframes accordion {
      from {background-color: white; width:150px;}
      20% {background-color: #191917;}
      50% {width:310px; }
      to {background-color: #3c3c38; width:250px; }
      }
      
      
.container {
      border:25px solid grey;
      width: 700px;
      height: 75px; 
      overflow:hidden;
      background: #e3e3e3;
      margin: auto;
      display: -moz-box;
      display: -webkit-box;
      display: box;
      -moz-box-orient: horizontal; 
      -webkit-box-orient: horizontal;
      box-orient: horizontal;
      }
         
aside { 
      overflow:hidden;
      display: block; 
      background-color: white;
      -moz-box-flex: 0.5; 
      -webkit-box-flex: 0.5;
      box-flex: 0.5;
      } 
         
aside:hover {
      -webkit-animation-name: accordion;
      -webkit-animation-duration: 0.18s;
      -webkit-animation-direction:alternate;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-transition-property:background-color,width; 
      -webkit-transition-duration: 0s,0s; 
      -webkit-transition-timing-function: linear,linear;
      -webkit-transition-delay:0.18s,0.18s;
       background-color:#3c3c38;
       width:250px;
      }

The HTML

<div class="container">
         <aside > <a href="#" id="id1">Item 1 </a></aside>
         <aside ><a href="#" id="id2"> Item 2 </a></aside>
         <aside ><a href="#" id="id3"> Item 3 </a></aside>
         <aside ><a href="#" id="id4"> Item 4 </a></aside>
      </div>

Thanks

kailoon's icon

Kuler's palette

Flexible Box Model

Comments