Ofset mesafesi - CSS Hileleri

Bu özellik olarak hayata başladı motion-offset. Bu ve diğer tüm ilgili hareket- * özellikleri, spesifikasyonda ofset- * olarak yeniden adlandırılıyor. Burada almanakta isimleri değiştiriyoruz. Şu anda kullanmak istiyorsanız, muhtemelen en iyisi her iki sözdizimini de kullanmaktır.

CSS'deki motion-offsetmülk diyor ki: ne kadar uzaktasınız motion-path? Bu, hareket yollarıyla ilişkili canlandırılabilir özelliktir.

.thing-that-moves ( /* "Old" syntax. Available in Blink browsers as of ~October 2015 */ motion-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); motion-offset: 0%; /* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */ offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); offset-distance: 0%; animation: move 3s linear infinite; ) /* Animate the element along the path from 0% to 100% */ @keyframes move ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )

Yukarıdaki örnekte, başlangıç motion-offsetdeğerini olarak ayarladık 0%, ancak açıkça tanımlanmadığında bile sıfırın varsayılan değer olduğunu belirtmek gerekir (bunu dışarıda bırakabilirdik).

Değişkenler

offset-distanceÖzellik aşağıdaki değerleri kabul eder:

length
percentage

Her iki durumda da değer, yolun başlangıç noktasından (varsayılan 0pxveya değeridir) yolun bitiş noktasına kadar olan mesafenin uzunluğunu belirtir 0%.

Misal

Bu örnekte, küçük bir dairenin daha büyük bir dairenin yolu boyunca hareket ettiği iki dairemiz var.

Şekilleri çizmek için kullandığımız SVG dosyası:

Şimdi, .markerCSS'mizdeki .tracksınıfı , sınıf koordinatlarını takip edecek şekilde ayarlayabiliriz :

/* The motion-offset is zero by default */ .marker ( offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); animation: move 3s linear infinite; ) @keyframes move ( /* Move the .marker from it's default value of 0% to 100% of the path's length */ 100% ( offset-distance: 100%; ) )

CodePen'de Geoff Graham (@geoffgraham) tarafından yazılan Bir Yol Boyunca Animasyonun Kalem Basit Örneğine bakın.

Benzer şekilde, offset-distancedeğeri% 50'de durdurabiliriz ve animasyon yolun yarısına kadar düşer:

CodePen'de Geoff Graham (@geoffgraham) tarafından yazılan Bir Yol Boyunca Animasyonun Kalem Basit Örneğine bakın.

Ya da animasyonun hızını kontrol etmek için, işleri hızlandırmak için offset-distancedeğeri% 300 ile çarpabiliriz . Bununla birlikte, animasyonun, öğenin yolda ilerlemesi için gerekenden daha büyük bir değerde çalışacağı süreyi belirlediysek, animasyon tekrarlamadan önce aralığını tamamlayana kadar hareket duracaktır:

CodePen'de Geoff Graham (@geoffgraham) tarafından yazılan Bir Yol Boyunca Animasyonun Kalem Basit Örneğine bakın.

Tarayıcı desteği

bu offset-distanceözellik, bu yazının yazıldığı tarihte hala deneysel bir özellik olarak kabul edilmektedir ve tarayıcı desteğiyle ilgili herhangi bir belge bulunmamaktadır. Ancak, motion-pathdestekle ilgili belgeler var ve bunu şimdilik bir temel olarak kullanabiliriz.

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.