CSS: Animasi vs Transisi


155

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?

Jawaban:


209

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.


7
lihat artikel ini juga kirupa.com/html5/css3_animations_vs_transitions.htm , itu dengan benar menunjukkan bahwa transisi adalah cara untuk pergi ketika melakukan interaksi javascript.
Scott Jungwirth

40

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


21

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.


Ketika Anda mengatakan "akselerasi CPU", apakah Anda mungkin mengatakan "akselerasi GPU"? Saya percaya bahwa animasi perhitungan ulang non-layout seperti "terjemahkan" mendapatkan manfaat itu
jv-dev

12
  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.


Saya juga harus menambahkan bahwa animasi memiliki kerangka kunci, memungkinkan Anda untuk melakukan perkembangan yang sangat kompleks dan terkontrol, yang agak menakjubkan.
paulcpederson

3

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.


1
Saya tidak setuju dengan definisi ini karena keduanya menentukan bagaimana dan apa
Zach Saucier

3

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.


1

.yourClass {
    transition: all 0.5s;
color: #00f;
margin: 50px;
font-size: 20px;
cursor: pointer;
}

.yourClass:hover {
    color: #f00;
}
<p class="yourClass"> Hover me </p>


-1

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.

3
# 2 dan # 3 tidak benar
Zach Saucier

1
Saya tidak yakin bagaimana # 3 tidak benar? Tampaknya hal yang masuk akal untuk dipertimbangkan, dan penghitungan animasi-iterasi tampaknya menjadi properti yang valid: developer.mozilla.org/en-US/docs/Web/CSS/…

1
Dua hal dengan itu: 1) jika transisi dimulai lagi nanti itu masih "ulangi" bahkan jika tidak segera setelah iterasi pertama. 2) Anda dapat memiliki transisi yang memalsukan pengulangan langsung tergantung pada animasinya. Lihat artikel Trik CSS saya untuk informasi lebih lanjut tentang apa yang saya maksud.
Zach Saucier

-1

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.