Her anahtar karenin yerine tüm animasyona uygulanabilmeniz için -webkit-animasyon-zamanlama işlevinin bir yolu var mı?

Question

Animasyon için biraz yeniyim, bu yüzden burada büyük bir kavram kaçırıyorsam beni affet. Bir eğri üzerinde bir noktaya işaret eden bir ok canlandırmam gerekiyor, sadece bu yazı için bir kübik eğri olduğunu söyleyelim. Ok, eğri çizgisi boyunca hareket eder ve her zaman birkaç pikselin altına işaret eder.

@-webkit-keyframes ftch { 
0% { 
    opacity: 0; 
    left: -10px; 
    bottom: 12px; 
} 

25% { 
    opacity: 0.25; 
    left: 56.5px; 
    bottom: -7px; 
} 

50% { 
    opacity: 0.5;   
    left: 143px; 
    bottom: -20px; 
} 

75% { 
    opacity: 0.75; 
    left: 209.5px; 
    bottom: -24.5px; 
} 

100% { 
    opacity: 1; 
    left: 266px; 
    bottom: -26px; 
} 

} Ancak

, ben -webkit-animasyon-zamanlama-fonksiyonunu kullanarak bu animasyonu çalıştırın:: kolaylığı yaptım Peki

, eğrinin çizgisi kullanılarak CSS3 boyunca ben kurulum ana kareler olduğunu -in, her bir anahtar karenin hareket etmesini kolaylaştırıyor, ki bu kesinlikle istediğim gibi değil. Tüm animasyonun harekete geçmesini istiyorum.

Bunu yapmamın farklı bir yolu var mı? Her bir anahtar kareden ziyade, hareketin tamamını tüm diziye uygulamak için bazı özellik var mı? sizin için

Answer 1

Belirli bir anda nesnenin belirli bir noktada olmasını söylediğiniz için, bir dizi anahtar karenin üzerinde bir hareket hızı işlevi uygulayamazsınız. Bir dizi anahtar karesinin üzerinde bir "kolaylık" uyguladıysanız, bu durumda nesne% 25 oranında, gerekli "kontrol noktası" nın ardında olur ve sonuçta% 100 seviyesine ulaşana kadar hızlanır.

puanlarınız az ya da çok eşit uzaklıkta ise

, sen uygulayabilirsiniz:

.animatedobject { 
    -webkit-animation-timing-function: linear; 
} 

ve animasyon eğer biraz robot, daha fazla daha az iyi bakacağız.

daha doğal bir yaklaşım, hızlandırmak hızını sürdürmek ve ardından "fren" olacaktır:

@-webkit-keyframes ftch { 
0% { 
    opacity: 0; 
    left: -10px; 
    bottom: 12px; 
    -webkit-animation-timing-function: ease-in; 
} 

25% { 
    opacity: 0.25; 
    left: 56.5px; 
    bottom: -7px; 
    -webkit-animation-timing-function: linear; 
} 

50% { 
    opacity: 0.5;   
    left: 143px; 
    bottom: -20px; 
    -webkit-animation-timing-function: linear; 
} 

75% { 
    opacity: 0.75; 
    left: 209.5px; 
    bottom: -24.5px; 
    -webkit-animation-timing-function: linear; 
} 

100% { 
    opacity: 1; 
    left: 266px; 
    bottom: -26px; 
    -webkit-animation-timing-function: ease-out; 
} 
} 

webkit bu kareleri gerek olmazdı ve hiçbir sorun uygulayarak olurdu bir yol boyunca animasyonlar destekliyorsa sadece iki ana kareye dönüş.

Answer 2

Bazı referans aşk: Daha spesifik http://www.w3.org/TR/css3-animations/

: http://www.w3.org/TR/css3-animations/#timing-functions-for-keyframes-

Sadece ziyade böyle sonra başka çoklu anahtar kare animasyonlar tek ardından konumu, başka birine bir hamle olarak, animasyon istifleme yapmak isteyebilirsiniz bir.

Answer 3

Bir animasyonun farklı yönlerine uygulanacak farklı hareket hızı işlevleri istediğinizde, içeriğinizi iki dilde yerleştirerek animasyonlarınızı ayırmalısınız.

Bu durumda, bir hareket animasyonu uygulamak için bir ebeveyn div ve opaklık animasyonunu uygulamak için bir alt div oluşturmalısınız. Opaklık animasyonu, bir eğri eğrisine sahip olmalıdır: doğrusal ve hareket animasyonu, sizin için en uygun hareket işlevine sahip olmalıdır. Bununla birlikte, Duopixel'in gevşeme eğrilerini ve sabit kontrol noktalarını karıştırmakla ilgili söylediklerimi tekrarlayacağım - bu durumda aslında animasyonlara ihtiyacınız olmamalı, sadece iki% 0:% 100 animasyon - biri ebeveyn için ve diğeri çocuk div için.

Çok fazla CSS3 animasyonu yaptığımızdan, Sencha Animator ürünümüz için this guide yazdım - bu aracı kullanmak istemeseniz bile CSS3 ile çalışan karmaşık animasyonların nasıl elde edileceği hakkında bazı genel yararlı bilgilere sahiptir.