Pure CSS3 Accordion Dengan Animasi

Pure CSS3 Accordin dengan Animasi ini tidak kalah menarik dengan Efek Pure CSS3 Slider yang telah saya share kemarin. Cara membuat Pure CSS3 Accordin dengan Animasi sangat sederhana sekali dan sebelum Anda membuatnya di blog Anda sebaiknya Anda lihat DEMO-nya dengan mengklik tombol di bawah ini.

• DEMO Klik disini!!!

Untuk membuat Pure CSS Accordin dengan animasi di blog silahkan Anda simak langkah-langkah di bawah ini:

1. Seperti biasa login akun blogger Anda.
2. Klik Template  Edit HTML
3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan script css berikut ini tepat di atas kode ]]></b:skin> atau </style>

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #aaa;
}
h1, h2 {
    margin:10px 0;
    text-align: center;
}
header {
    background-color:rgba(33, 33, 33, 0.9);
    color:#ffffff;
    display:block;
    font: 14px/1.3 Arial,sans-serif;
    height:50px;
    position:relative;
}
header h2{
    font-size: 22px;
    margin: 0px auto;
    padding: 10px 0;
    width: 80%;
    text-align: center;
}
header a, a:visited {
    text-decoration:none;
    color:#fcfcfc;
}
.accordion {
    margin:20px auto;
    overflow:hidden;
    position:relative;
    width:960px;
}
/* CSS3 accordion */
.css3accordion {
    border: 9px solid #353535; 
    border-radius: 6px;
    padding: 5px 5px 6px 0; 
    background: #030303; 
    height: 320px;
    width: 960px;

    /* CSS3 shadows */
    -webkit-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); 
    -moz-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); 
    -ms-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* hide first level spans */
.css3accordion > span {
    display: none
}

/* main accordion styles and slides */
.css3accordion ol {
    height: 100%;
    list-style: none;
    overflow: hidden;
    position: relative;
}
.css3accordion li {
    float: left;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 48px;

    /* CSS3 transition for slides */
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}

.css3accordion li a {
    display: block;
    float: left;
    height: 320px;
    position: relative;
    width: 48px;
}

/* slide headers */
.css3accordion  h2 {
    font-size: 16px;
    font-weight: normal;
    height: 48px;
    left: 0;
    line-height: 265%;
    margin: 0;
    position: absolute;
    top: 0;
    width: 320px;
    z-index: 1;

    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(-100%) rotate(-90deg); 
    -webkit-transform-origin: right top; 
    -moz-transform: translateX(-100%) rotate(-90deg);
    -moz-transform-origin: right top; 
    -ms-transform: translateX(-100%) rotate(-90deg);
    -ms-transform-origin: right top; 
    -o-transform: translateX(-100%) rotate(-90deg); 
    -o-transform-origin: right top; 
    transform: translateX(-100%) rotate(-90deg); 
    transform-origin: right top; 
}
.css3accordion h2 span { 
    background-color: #353535;
    border-radius: 4px;
    color: #fff;
    display: block;
    margin-top: 5px;
    padding-right: 10%;
    text-align: right;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none; 
}

/* 'counter' object */
.css3accordion h2 span:after { 
    color: #080808;
    font-weight: bold;
    left: 10%;
    position: absolute;
    text-shadow: -1px 1px 0 #555555;
    top: 10%;

    /* CSS3 rotate for 'counter' */
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    transform: rotate(90deg);
}
/* 'counter' values */
li.slide1  h2 span:after {
    content: "1";
}
li.slide2  h2 span:after {
    content: "2";
}
li.slide3  h2 span:after {
    content: "3";
}
li.slide4  h2 span:after {
    content: "4";
}
li.slide5  h2 span:after {
    content: "5";
}

/* inner slide content */
.css3accordion li div {
    margin-left: 5px;
    padding-left: 48px;
}

/* auto animation */
.css3accordion li {
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 25.0s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 25.0s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

.css3accordion li:nth-child(2) {
    -webkit-animation-delay: 5.0s;
    -moz-animation-delay: 5.0s;
}
.css3accordion li:nth-child(3) {
    -webkit-animation-delay: 10.0s;
    -moz-animation-delay: 10.0s;
}
.css3accordion li:nth-child(4) {
    -webkit-animation-delay: 15.0s;
    -moz-animation-delay: 15.0s;
}
.css3accordion li:nth-child(5) {
    -webkit-animation-delay: 20.0s;
    -moz-animation-delay: 20.0s;
}

@-webkit-keyframes anim_slides {
    0% {
        width: 48px;
    }
    20% {
        width: 768px;
    }
    40% {
        width: 48px;
    }
    100% {
        width: 48px;
    }
}
@-moz-keyframes anim_slides {
    0% {
        width: 48px;
    }
    20% {
        width: 768px;
    }
    40% {
        width: 48px;
    }
    100% {
        width: 48px;
    }
}

5. Kemudian simpan template Anda

Penerapannya:

Masukkan kode HTML di bawah ini kedalam postingan blog Anda (menggunakan mode HTML) atau bisa juga di dalam gadget HTML/JavaScript.

<div class="accordion css3accordion">
 <ol>
      <li class="slide1">
        <h2><span>Slide One</span></h2>
  <div>
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4N9SPlyABVR44wRofdndm2xbQtZuiWRL-eElPe91IDcWTKjACUTAVfBmLqp3CfZiiN-Nj2YlNIglwStR_k1bBAOfA9frzaNB7DnKCscDoRuH1ANgmeOspv1k2C2RfZVvxQhkRuSf1vH0J/s1600/BIE_Nature1.jpg" alt="Slide One" />
     </div>
  </li>
      <li class="slide2">
        <h2><span>Slide Two</span></h2>
  <div>
         <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoMReKKcZ7vxfZWMsnESde90Trr8Lu_YvwMdOqP2isOjAKsoN7gmZiyhiPHdMK8ZsD99aVtQfv3vn-ebAou8eDXPpcXiPogimTlkkIAoDxOguMvEkEDGjg7UXIy_7c8jp6MLKS_mYV_i0N/s1600/BIE_Nature2.jpg" alt="Slide Two" />
      </div>
  </li>
       <li class="slide3">
         <h2><span>Slide Three</span></h2>
  <div>
         <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ORv4zbyVzZmxFSPhaCmdebv7IBr1Xd0y5Pxbp5sDczMVoIff90_0tKETU6FBWR0S9WbT18bl94iK1QrwxzYw0IsStprn4vwir7DN_xFJLIsCxh96-2j40R-Xs26njMdPP30OiqDJx4LX/s1600/BIE_Nature3.jpg" alt="Slide Three" />
      </div>
  </li>
        <li class="slide4">
          <h2><span>Slide Four</span></h2>
  <div>
         <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGc7tjF7D1d0n5aOW0M5YA8MjgaXsSeiry4DI20uN5A35E4G4WvL0KdkDy5qfMHf-Cq3Hzul1DmK6yDlHTi2phq0KGjMD8n1Vo8KCc78K1PYct_msc8duj1KWF6pj41YGuNCHkqtrVCDT5/s1600/BIE_Nature4.jpg" alt="Slide Four" />
      </div>
  </li>
        <li class="slide5">
          <h2><span>Slide Five</span></h2>
  <div>
         <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicmCR7ykCVOwLI54TZ5STgXjyYl6cV3TnINXlktN7a_xaAEHbY00p5RCDFGhUjN9CrOVfK4Zxm954rAIyQ3DWJSl7i4FrWe-xbdvzFJfSf73XR7Rnk6QQIuxg9Vvk7sDytT2VC4DvfRCfA/s1600/BIE_Nature5.jpg" alt="Slide Five" />
      </div>
  </li>
 </ol>
 </div>

Semoga bermanfaat dan salam blogger indonesia...
UpsS baca juga Cara membuat efek skitter slider di blog

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250