CSS: Animasyon ve Geçiş

Bu yüzden, hem CSS3 geçişlerini hem de animasyonları nasıl yapacağımı anlıyorum. Açık olmayan ve googled olan, ne zaman kullanılacağıdır.

Örneğin, bir top zıplatma yapmak istersem, animasyonun gitmenin yolu olduğu açıktır. Anahtar kareleri sağlayabilirim ve tarayıcı ara kareleri yapabilirdi ve güzel bir animasyon olacak.

Bununla birlikte, bahsedilen etkinin her iki şekilde de elde edilebileceği durumlar vardır. Basit ve yaygın bir örnek facebook tarzı kayar çekmece menüsünü uygulamak olacaktır:

Bu etki aşağıdaki gibi geçişlerle elde edilebilir:

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

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

http://jsfiddle.net/NwEGz/

Veya bunun gibi animasyonlar aracılığıyla:

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

Şöyle görünen HTML ile:

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

Ve bu eşlik eden jQuery betiği:

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

Anlamak istediğim, bu yaklaşımların artıları ve eksileri.

1. Bariz olan bir fark, canlandırmanın çok daha fazla kod almasıdır.
2. Animasyon daha iyi esneklik sağlar. İçeri ve dışarı kaydırmak için farklı animasyonlar olabilir
3. Performans hakkında söylenebilecek bir şey var mı? Her ikisi de s / b ivmelenmesinden yararlanıyor mu?
4. Hangisi daha modern ve ileriye giden yol
5. Ekleyebileceğiniz başka bir şey var mı?

Görünüşe göre bunları nasıl yapacağınız konusunda bir başınıza sahipsiniz, sadece ne zaman yapacağınızı değil.

Geçiş , yalnızca iki farklı durum arasında gerçekleştirilen bir animasyondur - bir başlangıç ​​durumu ve bir bitiş durumu. Bir çekmece menüsü gibi, başlangıç ​​durumu açık olabilir ve bitiş durumu kapatılabilir veya tam tersi olabilir.

Bir şey yapmak istiyorsanız gelmez özellikle başlangıç durumuna ve bitiş durumunu içerir veya bir geçiş ana kareler üzerinde daha fazla ince tane kontrolüne ihtiyacımız, o zaman bir animasyon kullanmak zorundayız.

Tanımların kendileri için konuşmasına izin vereceğim (Merriam-Webster'e göre):

Geçiş : Bir formdan, sahneden veya stillerden diğerine bir hareket, gelişme veya evrim

Animasyon : Hayata veya yaşamın niteliklerine sahiptir; hareket dolu

İsimler CSS'deki amaçlarına uygun

Bu nedenle, verdiğiniz örnek geçişleri kullanmalıdır, çünkü bu sadece bir durumdan diğerine değişikliktir

Daha kısa bir cevap, doğrudan nokta:

Geçiş:

1. Tetikleyici bir öğeye ihtiyaç duyar (: vurgulu,: odak vb.)
2. Yalnızca 2 animasyon durumu (başlangıç ​​ve bitiş)
3. Daha basit animasyonlar için kullanılır (düğmeler, açılır menüler vb.)
4. Oluşturması daha kolay ama çok fazla animasyon / efekt olanağı yok

Animasyon @keyframes:

1. Sonsuz animasyonlar için kullanılabilir
2. 2'den fazla durum ayarlayabilir
3. Sınırsız

Her ikisi de çok daha pürüzsüz bir etki için CPU hızlandırma kullanır.

1. Aynı geçişi tekrar tekrar kullanmadığınız sürece animasyon çok daha fazla kod alır, bu durumda animasyon daha iyi olur.

2. Animasyon olmadan içeri ve dışarı kaymak için farklı efektleriniz olabilir. Hem orijinal kuralda hem de değiştirilen kuralda farklı bir geçiş yapın:

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

3. Animasyonlar sadece geçişlerin soyutlamalarıdır, bu yüzden geçiş donanım hızlandırılırsa animasyon olacaktır. Fark yaratmıyor.

4. Her ikisi de çok modern.

5. Temel kuralım, aynı geçişi üç kez kullanırsam, muhtemelen bir animasyon olmalıdır. Gelecekte bunu korumak ve değiştirmek daha kolaydır. Ancak sadece bir kez kullanıyorsanız, animasyonu yapmak için daha tipiktir ve belki de buna değmez.

Animasyonlar sadece - özellik kümesinin düzgün bir davranışı. Başka bir deyişle , bir dizi öğenin özelliklerine ne olması gerektiğini belirtir . Bir animasyon tanımlar ve bu özellik kümesinin animasyon işlemi sırasında nasıl davranması gerektiğini tanımlarsınız.

Geçişler diğer tarafta belirtmek nasıl bir özellik (veya özellikleri) onların değişikliği gerçekleştirmelidir. Her değişiklik. JavaScript veya CSS ile olsun, belirli bir özellik için yeni bir değer ayarlamak her zaman bir geçiştir, ancak varsayılan olarak düzgün değildir. transitionCss stilini ayarlayarak , bu değişiklikleri gerçekleştirmek için farklı (yumuşak) bir yol tanımlarsınız.

Denilebilir ki Geçişlerin , belirtilen özellik her değiştiğinde gerçekleştirilmesi gereken varsayılan bir animasyonu tanımladığı .

Performans hakkında söylenebilecek bir şey var mı? Her ikisi de s / b ivmelenmesinden yararlanıyor mu?

Modern tarayıcılarda, h / h hızlanma özellikleri ortaya çıkar filter, opacityve transform. Bu hem CSS Animasyonları hem de CSS Geçişleri içindir.

CSS3 animasyonunun CSS3 geçişine karşı size istediğiniz cevabı vereceğine inanıyorum .

Temel olarak aşağıda bazı paketler verilmiştir:

1. Performans önemliyse, CSS3 geçişini seçin.
2. Her geçişten sonra durum korunacaksa, CSS3 geçişini seçin.
3. Animasyonun tekrarlanması gerekiyorsa, CSS3 animasyonunu seçin. Çünkü animasyon-yineleme-sayısını destekler.
4. Karmaşık bir animasyon isteniyorsa. Sonra CSS3 animasyonu tercih edilir.

Kendinizi daha iyi rahatsız etmeyin. Benim vermek, sadece bir veya iki satır kod ile sorununuzu çözebilir, o zaman sadece benzer davranışa neden olacak kodlar demet yazmak yerine bunu yapmak olduğunu. Her neyse, geçiş animasyonun bir altkümesi gibidir. Bu sadece geçişin belirli sorunları çözebileceği anlamına gelirken diğer yandan animasyon tüm sorunları çözebilir. Animasyon, geçişin gerçekten yapamayacağı bir şey olan% 0'dan% 100'e kadar her aşamayı kontrol etmenizi sağlar. Animasyon, üzerinde çalıştığınıza bağlı olarak aynı sonucu gerçekleştirmek için bir veya iki kod satırı kullanırken, bir grup kod yazmanızı gerektirir. JavaScript açısından, geçiş kullanmak en iyisidir. Sadece iki faz içeren herhangi bir şey, yani başlangıç ​​ve bitiş kullanımı geçişi. Özet, eğer stresli ise don '