Cara menggunakan css animation infinite loop

Default value:1Inherited:noAnimatable:no. Read about animatableVersion:CSS3JavaScript syntax:object.style.animationIterationCount="infinite" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Propertyanimation-iteration-count43.0
4.0 -webkit-10.016.0
5.0 -moz-9.0
4.0 -webkit-30.0
15.0 -webkit-
12.0 -o-

CSS Syntax

animation-iteration-count: number|infinite|initial|inherit;

Property Values

ValueDescriptionDemonumberA number that defines how many times an animation should be played. Default value is 1Play it »infiniteSpecifies that the animation should be played infinite times (for ever)Play it »initialSets this property to its default value. Read about initialinheritInherits this property from its parent element. Read about inherit

<div class="loader"></div>
<div class="loader2"></div>

.loader {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(225, 0, 56, 0.8);
    opacity:.9;
    border-right:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 35px #ff3300;
    width:50px;
    height:50px;
    margin:0 auto;
    -moz-animation:berputar 1s infinite ease-in-out;
    -webkit-animation:berputar 1s infinite linear;
}
.loader2 {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(225, 0, 56, 0.8);
    opacity:.9;
    border-left:5px solid rgba(0,0,0,0);
    border-right:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 15px #ff3300;
    width:30px;
    height:30px;
    margin:0 auto;
    position:relative;
    top:-50px;
    -moz-animation:berputarkecil 1s infinite linear;
    -webkit-animation:berputarkecil 1s infinite linear;
}
@-moz-keyframes berputar {
    0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
    50% { -moz-transform:rotate(145deg); opacity:1; }
    100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes berputarkecil {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes berputar {
    0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
    50% { -webkit-transform:rotate(145deg); opacity:1;}
    100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes berputarkecil{
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}

← Newer Post Older Post →

Keluarkan popcorn! Hari ini kami sedang membangun judul film Star Wars dari "The Force Awakens" trailer.

Contoh ini menggabungkan animasi CSS dengan beberapa properti CSS lainnya yang mungkin membantu Anda, khususnya transformasi scale, translate and rotate.

Transformasi

Meskipun mungkin terdengar seperti itu menciptakan animasi, properti transformasi sebenarnya digunakan pengaturan posisi statis, miring atau skala elemen. Kita dapat menggunakannya untuk menciptakan efek yang hebat tetapi untuk melakukannya kita harus memiliki transformasi yang berbeda untuk setiap bingkai utama atau negara yang kita animasikan.

Transform: scale(), translateZ() and rotateY()

Kita dapat membuat elemen yang lebih besar atau lebih kecil menggunakan scale . Menggunakan 

@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

Dalam hal ini kita akan menggunakan kombinasi skala dan menerjemahkanZ untuk membuatnya terlihat seperti beberapa kata terbang melintasi angkasa.

Terakhir kami akan gunakan 

@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

SVG, HTML and CSS

Sebagai persiapan untuk contoh ini saya membuat dua file SVG untuk bagian Star and Wars pada logo. Jangan ragu untuk mengambilnya untuk digunakan jika Anda ingin bermain bersama.

HTML untuk demo adalah sebagai berikut:

<div class="starwars-demo">
  <img src="/images/star.svg" alt="Star" class="star">
  <img src="/images/wars.svg" alt="Wars" class="wars">
  <h2 class="byline" id="byline">The Force Awakens</h2>
</div>

Gambar statis dari beberapa bintang digunakan untuk latar belakang. Font di byline sangat sulit ditemukan, jadi saya telah mereferensikan font web "Lato" dalam contoh ini.

Dengan beberapa posisi absolut untuk memusatkan konten di tengah layar, kita mulai dengan ini:

Mengaktifkan Star and Wars

Kami ingin teks yang lebih besar memudar, sementara juga mulai lebih besar dan semakin kecil dari waktu ke waktu. Ini adalah kasus yang bagus untuk 

@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

Ada dua properti yang berubah selama animasi ini. pada

@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

Transformasi dimulai dengan menetapkan skala pada

@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

pada akhir 

@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

Kita dapat menerapkan bingkai utama ini ke kata "Star" seperti ini:

.star {
  animation: star 10s ease-out infinite;
}
.wars {
  animation: wars 10s ease-out infinite;
}

Properti

@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

Membuat 3D

Menggunakan transformasi 3D dalam CSS, baik menerjemahkan sepanjang sumbu Z, atau memutar di sekitar sumbu Y dan Z mengharuskan kita menetapkan panggung untuk 3D. Dalam istilah HTML ini berarti kita membuat wadah, dan memberi tahu browser bahwa beberapa hal 3D akan terjadi.

Kami melakukan ini dengan menambahkan yang berikut ke

.star {
  animation: star 10s ease-out infinite;
}
.wars {
  animation: wars 10s ease-out infinite;
}

.starwars-demo {
  perspective: 800px;
  transform-style: preserve3d;
}

Kedua properti ini memberi tahu browser bahwa anak-anak penampung harus diposisikan dalam 3D, bukan datar. [CSS Tricks[ masuk ke lebih detail tentang properti.

Kedua, properti 

.star {
  animation: star 10s ease-out infinite;
}
.wars {
  animation: wars 10s ease-out infinite;
}

.star {
  animation: star 10s ease-out infinite;
}
.wars {
  animation: wars 10s ease-out infinite;
}

Dengan itu, kami akan memperkenalkan tagline.

Awaken the Force

Tagline "The Force Awakens" muncul di trailer dengan setiap huruf berputar pada tempatnya. Kita dapat membuat efek ini menggunakan

@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

.star {
  animation: star 10s ease-out infinite;
}
.wars {
  animation: wars 10s ease-out infinite;
}

Masalah yang saya temukan dengan cepat adalah bahwa tidak ada cara langsung untuk menghidupkan masing-masing huruf di garis. Pendekatan pertama saya adalah membungkus setiap huruf secara manual dalam tag

.star {
  animation: star 10s ease-out infinite;
}
.wars {
  animation: wars 10s ease-out infinite;
}

.star {
  animation: star 10s ease-out infinite;
}
.wars {
  animation: wars 10s ease-out infinite;
}

Kami akan menerapkan animasi untuk setiap huruf.

Pertama, bingkai utama:

@keyframes spin-letters {
  0%, 10% {
    opacity: 0;
    transform: rotateY(90deg);
  }
  30% {
    opacity: 1;
  }
  70%, 86% {
    transform: rotateY(0);
    opacity: 1;
  }
  95%, 100% {
    opacity: 0;
  }
}

Untuk mulai dengan, surat-surat diputar 90 derajat, kemudian dengan 70% melalui animasi, mereka telah animasi untuk menghadapi pemirsa.

Kita dapat menerapkan kumpulan bingkai utama ini ke setiap rentang seperti:

.byline span {
  animation: spin-letters 10s linear infinite;
}
.byline {
  animation: move-byline 10s linear infinite;
}

Hasilnya adalah setiap kontainer

.star {
  animation: star 10s ease-out infinite;
}
.wars {
  animation: wars 10s ease-out infinite;
}