22.3.15
16
Border List Animasi Dengan Keyframes Infinite - Efek animasi dengan media keyframes infinite dibentuk untuk membuat sebuah objek dengan gerakan tidak terbatas (infinite), artinya objek yang diatur perintahnya oleh media keyframes infinite akan bergerak secara terus menerus tanpa henti. Seperti Membuat Efek Keyframes Show Pada Gambar Hover pada bahasan sebelumnya, gerakan objek saya bentuk dengan perintah HOVER, objek akan bergerak secara terus menerus hanya jika onMouse Hover (Panah mouse berada diarea/diatas objek target).

Seperti membuat slider atau slideshow, dimana objek target akan bergerak tanpa diperintahkan, namun slideshow effect biasanya diperintah dengan penggunaan JavaScript. Dalam penggunaan element CSS, @keyframes inilah yang harus kita gunakan untuk menggantikan posisi JavaScript. Cukup menentukan nilai pada setiap gerakan, lalu kita hubungkan dengan CSS-animation untuk mengatur dan menyusun jarak pergantian yang akurat, agar objek yang bergerak memiliki waktu gerak dan berganti dengan nilai yang sama.
Contoh efek gerak dengan infinite:

Dengan keyframes Membuat Carousel Gambar 3D Dengan CSS Transform
Dengan js Efek Slide Show Otomatis Pada Gambar

Dari kedua efek gerak otomatis diatas, saya akan coba membuat Border List Animasi Dengan Keyframes Infinite. Disini yang kita buat bergerak hanya border, garis tepi bagian atas (top-list) pada sebuah content box dengan keyframes media menggunakan element CSS seperti ini:



<style type='text/css'>
#areaText {margin:-45px auto}
.topList [role="progressbar"][aria-busy="true"] {
  position: absolute;padding-top:20px;width:100%;
  -webkit-animation: preloader-background linear 3.5s infinite;
  -moz-animation: preloader-background linear 3.5s infinite;
  animation: preloader-background linear 3.5s infinite}

.topList [role="progressbar"][aria-busy="true"]::before,
.topList [role="progressbar"][aria-busy="true"]::after {
  display: block;position: absolute;content: '';top:0;
  z-index: 999;height: 20px;
  -webkit-animation: preloader-front linear 3.5s infinite;
  -moz-animation: preloader-front linear 3.5s infinite;
  animation: preloader-front linear 3.5s infinite}

.topList [role="progressbar"][aria-busy="true"]::before {right:50%}
.topList [role="progressbar"][aria-busy="true"]::after {left:50%}
@keyframes preloader-background {
0%, 24.9% {background: #159756}
25%, 49.9% {background: #da4733}
50%, 74.9% {background: #3b78e7}
75%, 100% {background: #fdba2c}}

@keyframes preloader-front {
0% {width: 0;background:#da4733}
24.9% {width: 50%;background:#da4733}
25% {width: 0;background:#3b78e7}
49.9% {width: 50%;background:#3b78e7}
50% {width: 0;background:#fdba2c}
74.9% {width: 50%;background:#fdba2c}
75% {width: 0;background:#159756}
100% {width: 50%;background:#159756}}

@import url(http://fonts.googleapis.com/css?family=Allura|Aladin);
p {font:normal 13px/22px 'Aladin', cursive;;padding:22px 20px 20px;text-align:justify}
.topList {
  background-color: #FFFFAF;
  background-image:-webkit-linear-gradient(#666 1px, transparent 1px);
  background-image: -moz-linear-gradient(#666 1px, transparent 1px);
  background-image: linear-gradient(#666 1px, transparent 1px);
  -webkit-background-size: 100% 22px;-moz-background-size: 100% 22px;
  background-size: 100% 22px;
  line-height:  22px !important;position:relative}

.topList:after {
  right: 1%;transform: rotate(7deg);-webkit-transform: rotate(7deg);
  -moz-transform: rotate(7deg);bottom: 27px;
  box-shadow: 0 28px 8px rgba(0,0,0,0.3);content: "";height: 25px;
  position: absolute;width: 45%;z-index: -1}
</style>

Dan hasilnya :




DEMO SHOW



Border animasi



Untuk memberikan hiasan gerak pada conten box, agar tulisan apa yang nantinya Anda tuliskan disana mendapat perhatian dari pengunjung untuk tertarik membaca. Silahkan ganti tulisan yang saya beri warna ORANGE dengan content Anda pada pemanggil HTML di bawah ini:


<div id="areaText">
   <div class="topList">
      <div aria-busy="true" aria-label="Loading,please wait." role="progressbar"></div>
        <p>..Tulis Teks Anda Disini..</p>
   </div>
</div>


Bagaimana.? kira-kira hal apa yang akan Anda ceritakan disana, tulis cerita yang unik-unik ya disana, saya yakin sahabat semua pecinta SAHABAT BLOGGER 77 akan terkesan untuk membaca tulisan dalam content box Anda yang kerlap-kerlip. Oh iya, untuk mengganti warna list border Anda bisa cari warna kesayangan Anda pada Tabel Kode Color Heksa Terlengkap (Ragam Warna). Terima kasih.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Border List Animasi Dengan Keyframes Infinite
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

16 komentar

  1. bgus border listnya ,,
    keknya klo yg model bgni selalu gagal nih ,,,, hehe

    BalasHapus
    Balasan
    1. kalau boleh gantian neh Devy yang tanya,
      mas Fiu pakai sistem operasi apa pada browser, terus pakai browser apa jika online, mozilla, chrome, IE atau safari,

      karena perlu penambahan kode pemanggil peramban jika kita menggunakan browser yang berbeda (atau yang tidak dapat mendeteksi) sebuah efek, misal seperti kode seperti ini mas:

      @keyframes preloader-background {
      0%, 24.9% {background: #159756}
      25%, 49.9% {background: #da4733}
      50%, 74.9% {background: #3b78e7}
      75%, 100% {background: #fdba2c}}


      kode CSS diatas merupakan ALL peramban, namun pada mozilla tidak dapat merespon kode tersebut, sehingga efek tidak dapat bergerak sesuai yang diperintahkan kode CSS tersebut, jadi kita perlu menambahkan kode pemanggil peramban untuk mozilla seperti ini: @-moz-keyframes preloader-background. jadi susunannya menjadi seperti ini mas:

      @keyframes preloader-background {
      0%, 24.9% {background: #159756}
      25%, 49.9% {background: #da4733}
      50%, 74.9% {background: #3b78e7}
      75%, 100% {background: #fdba2c}}

      // Untuk Mozilla browser
      @-moz-keyframes preloader-background {
      0%, 24.9% {background: #159756}
      25%, 49.9% {background: #da4733}
      50%, 74.9% {background: #3b78e7}
      75%, 100% {background: #fdba2c}}

      // Untuk Chrome browser
      @-webkit-keyframes preloader-background {
      0%, 24.9% {background: #159756}
      25%, 49.9% {background: #da4733}
      50%, 74.9% {background: #3b78e7}
      75%, 100% {background: #fdba2c}}


      begitupun untuk @keyframes preloader-front

      Hapus
    2. OS win7 ...
      browser mozila ..

      :-?

      Hapus
    3. Saya pelaajri dulu ya mba. Saya pake MODZILA FIREFOX

      Hapus
    4. bisa kok mas fiu bordernya, mungkin pehamaan dan caranya yang berbeda saat mencobanya

      Hapus
  2. Cocok banget nich mbak di pake buat banner.....

    BalasHapus
  3. wah keren efek nya, scrif nya ijin save ya mba

    BalasHapus
  4. saya lihat-lihat saja dulu mbak karena kalau masalah beginian baru belajar maklum blogger baru

    BalasHapus
  5. Sekarang animasi begitu cukup pakai css yah.. makin canggih aja perkembangan web design sekarang....

    BalasHapus
  6. keren border animasinya, pengen nyobain ngoprek css ku

    BalasHapus
  7. Sebenarnya kalau urusan script saya nyerah bro, bukan napa napa tapi bikin pusing.

    BalasHapus
  8. Wah keren ya bordernya animasinya, kok bisa gitu ya ... #Heran

    BalasHapus
  9. masih nyimak yang ginian siapa tahu berguna di praktekkin template yang lain.

    BalasHapus
  10. SIMPEN dulu mbak devi,saya masih mubeng :D

    BalasHapus
  11. bagus mba devy, saya boleh diajarin langsung ga? :D

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK