CSS: Animasi vs Transisi

Jadi, saya mengerti bagaimana melakukan transisi dan animasi CSS3. Yang tidak jelas, dan saya sudah googled, adalah kapan harus menggunakan yang mana.

Misalnya, jika saya ingin membuat bola memantul, jelas bahwa animasi adalah cara untuk pergi. Saya bisa memberikan keyframe dan browser akan melakukan frame perantara dan saya akan membuat animasi yang bagus.

Namun, ada beberapa kasus ketika efek tersebut dapat dicapai dengan cara apapun. Contoh sederhana dan umum akan menerapkan menu laci geser gaya facebook:

Efek ini dapat dicapai melalui transisi seperti:

.sf-page {
    -webkit-transition: -webkit-transform .2s ease-out;
}

.sf-page.out {
    -webkit-transform: translateX(240px);
}

http://jsfiddle.net/NwEGz/

Atau, melalui animasi seperti ini:

.sf-page {
    -webkit-animation-duration: .4s;
    -webkit-transition-timing-function: ease-out;
}

.sf-page.in {
    -webkit-animation-name: sf-slidein;
    -webkit-transform: translate3d(0, 0, 0);
}

.sf-page.out {
    -webkit-animation-name: sf-slideout;
    -webkit-transform: translateX(240px);
}

@-webkit-keyframes sf-slideout {
    from { -webkit-transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(240px, 0, 0); }
}

@-webkit-keyframes sf-slidein {
    from { -webkit-transform: translate3d(240px, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}

http://jsfiddle.net/4Z5Mr/

Dengan HTML yang terlihat seperti ini:

<div class="sf-container">
    <div class="sf-page in" id="content-container">
        <button type="button">Click Me</button>
    </div>
    <div class="sf-drawer">
    </div>
</div>

Dan, skrip jQuery yang menyertainya:

$("#content-container").click(function(){
    $("#content-container").toggleClass("out");
    // below is only required for css animation route
    $("#content-container").toggleClass("in");
});

Yang ingin saya pahami adalah apa pro dan kontra dari pendekatan ini.

1. Satu perbedaan yang jelas adalah bahwa animating mengambil kode lebih banyak.
2. Animasi memberi fleksibilitas yang lebih baik. Saya dapat memiliki animasi berbeda untuk meluncur keluar dan masuk
3. Apakah ada sesuatu yang bisa dikatakan tentang kinerja. Apakah keduanya memanfaatkan akselerasi h / w?
4. Yang lebih modern dan jalan ke depan
5. Ada lagi yang bisa Anda tambahkan?

Sepertinya Anda memiliki pegangan tentang bagaimana melakukannya, hanya saja tidak kapan melakukannya.

Transisi adalah animasi , hanya yang dilakukan antara dua keadaan yang berbeda - yaitu keadaan mulai dan keadaan akhir. Seperti menu laci, keadaan awal bisa terbuka dan keadaan akhir bisa ditutup, atau sebaliknya.

Jika Anda ingin melakukan sesuatu yang tidak secara spesifik melibatkan keadaan awal dan keadaan akhir, atau Anda perlu kontrol butir lebih baik atas kerangka kunci dalam transisi, maka Anda harus menggunakan animasi.

Saya akan membiarkan definisi berbicara sendiri (menurut Merriam-Webster):

Transisi : Suatu gerakan, perkembangan, atau evolusi dari satu bentuk, panggung, atau gaya ke yang lain

Animasi : Diberkahi dengan kehidupan atau kualitas hidup; penuh gerakan

Nama-nama sesuai dengan tujuannya di CSS

Jadi, contoh yang Anda berikan harus menggunakan transisi karena itu hanya perubahan dari satu kondisi ke kondisi lainnya

Jawaban yang lebih singkat, langsung pada poin:

Transisi:

1. Membutuhkan elemen pemicu (: hover,: fokus, dll.)
2. Hanya 2 status animasi (awal dan akhir)
3. Digunakan untuk animasi yang lebih sederhana (tombol, menu dropdown dan sebagainya)
4. Lebih mudah untuk membuat tetapi tidak begitu banyak kemungkinan animasi / efek

@Keyframe Animasi:

1. Ini dapat digunakan untuk animasi tanpa akhir
2. Dapat mengatur lebih dari 2 negara
3. Tidak ada batasan

Keduanya menggunakan akselerasi CPU untuk efek yang jauh lebih halus.

1. Animasi membutuhkan lebih banyak kode kecuali Anda menggunakan transisi yang sama berulang kali, dalam hal ini animasi akan lebih baik.

2. Anda dapat memiliki efek berbeda untuk meluncur masuk dan keluar tanpa animasi. Hanya memiliki transisi yang berbeda pada aturan asli dan aturan yang dimodifikasi:

   .two-transitions {
       transition: all 50ms linear;
   }
   
   .two-transitions:hover {
       transition: all 800ms ease-out;
   }

3. Animasi hanyalah abstraksi dari transisi, jadi jika transisi dipercepat perangkat keras, animasi akan menjadi. Tidak ada bedanya.

4. Keduanya sangat modern.

5. Aturan praktis saya adalah jika saya menggunakan transisi yang sama tiga kali, itu mungkin harus menjadi animasi. Ini lebih mudah untuk dipertahankan dan diubah di masa depan. Tetapi jika Anda hanya menggunakannya sekali, itu lebih mengetik untuk membuat animasi dan mungkin tidak sepadan.

Animasi hanya itu - perilaku yang halus dari serangkaian properti. Dengan kata lain itu menentukan apa harus terjadi pada set properti elemen. Anda mendefinisikan animasi dan menjelaskan bagaimana perilaku set properti ini selama proses animasi.

Transisi di sisi lain menentukan bagaimana suatu properti (atau properti) harus melakukan perubahannya. Setiap perubahan. Menetapkan nilai baru untuk properti tertentu, baik itu dengan JavaScript atau CSS, selalu merupakan transisi, tetapi secara default tidak mulus. Dengan mengatur transitiondalam gaya css Anda menentukan cara yang berbeda (halus) untuk melakukan perubahan ini.

Dapat dikatakan bahwa transisi menentukan animasi default yang harus dilakukan setiap kali properti yang ditentukan telah berubah.

Apakah ada sesuatu yang bisa dikatakan tentang kinerja. Apakah keduanya memanfaatkan akselerasi h / w?

Di browser modern, akselerasi h / w terjadi untuk properti filter, opacitydan transform. Ini untuk Animasi CSS dan Transisi CSS.

Saya percaya animasi CSS3 vs transisi CSS3 akan memberikan jawaban yang Anda inginkan.

Pada dasarnya di bawah ini adalah beberapa takeaways:

1. Jika kinerja menjadi perhatian, maka pilih transisi CSS3.
2. Jika status dipertahankan setelah setiap transisi, maka pilih transisi CSS3.
3. Jika animasi perlu diulang, pilih animasi CSS3. Karena mendukung animasi-iterasi-hitung.
4. Jika animasi yang rumit diinginkan. Maka animasi CSS3 lebih disukai.

Jangan repot-repot sendiri mana yang lebih baik. Berikan saya adalah bahwa, jika Anda dapat memecahkan masalah Anda hanya dengan satu atau dua baris kode maka lakukan saja daripada menulis banyak kode yang akan menghasilkan perilaku serupa. Bagaimanapun, transisi seperti subset dari animasi. Ini berarti transisi dapat menyelesaikan masalah tertentu sementara animasi di sisi lain dapat menyelesaikan semua masalah. Animasi memungkinkan Anda untuk mengontrol setiap tahap mulai dari 0% hingga 100% yang merupakan sesuatu yang tidak dapat dilakukan oleh transisi. Animasi mengharuskan Anda menulis banyak kode sementara transisi menggunakan satu atau dua baris kode untuk melakukan hasil yang sama tergantung pada apa yang sedang Anda kerjakan. Berasal dari titik JavaScript, yang terbaik adalah menggunakan transisi. Apa pun yang melibatkan hanya dua fase yaitu mulai dan selesai menggunakan transisi. Ringkasan, jika stres, jangan