Border List Animasi Dengan Keyframes Infinite

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

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.

Belum berminat? tak apa 😊 bantu kami dengan membagikan link ini ke teman, siapa tahu, justru mereka sedang mencari ini!