motion-offset. Điều này và tất cả các thuộc tính chuyển động- * liên quan khác, đang được đổi tên thành offset- * trong thông số kỹ thuật. Chúng tôi đang thay đổi tên ở đây trong niên giám. Nếu bạn muốn sử dụng nó ngay bây giờ, có lẽ tốt nhất là sử dụng cả hai cú pháp.
Các motion-offsetbất động sản trong CSS nói: bao xa dọc theo motion-pathare you? Đây là animatable tài sản gắn liền với các đường chuyển động.
.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 */ ) )Trong ví dụ trên, chúng tôi đã đặt motion-offsetgiá trị ban đầu tại 0%, mặc dù cần lưu ý rằng số không là giá trị mặc định, ngay cả khi không được xác định rõ ràng (chúng tôi có thể đã bỏ qua).
Biến
Các offset-distancebất động sản chấp nhận các giá trị sau:
lengthpercentage
Trong cả hai trường hợp, giá trị chỉ định độ dài khoảng cách từ điểm bắt đầu của đường dẫn (mặc định là 0pxhoặc 0%) đến điểm cuối của đường dẫn.
Thí dụ
Trong ví dụ này, chúng ta có hai vòng tròn trong đó một vòng tròn nhỏ đi dọc theo đường của một vòng tròn lớn hơn.
Đây là tệp SVG mà chúng tôi đang sử dụng để vẽ các hình dạng:
Bây giờ, chúng ta có thể đặt .markerlớp trong CSS của mình để tuân theo .tracktọa độ lớp:
/* 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%; ) )Xem Ví dụ đơn giản về Bút vẽ hoạt hình dọc theo một con đường của Geoff Graham (@geoffgraham) trên CodePen.
Tương tự, chúng ta có thể dừng offset-distancegiá trị ở mức 50% và hoạt ảnh sẽ giảm xuống nửa chừng của đường dẫn:
Xem Ví dụ đơn giản về Bút vẽ hoạt hình dọc theo một con đường của Geoff Graham (@geoffgraham) trên CodePen.
Hoặc, để kiểm soát tốc độ của hoạt ảnh, chúng ta có thể nhân offset-distancegiá trị lên 300% để tăng tốc độ. Tuy nhiên, nếu chúng tôi đã chỉ định khoảng thời gian hoạt ảnh chạy ở một giá trị lớn hơn giá trị mà phần tử cần để di chuyển theo đường, thì chuyển động sẽ dừng cho đến khi hoạt ảnh hoàn thành khoảng thời gian trước khi lặp lại:
Xem Ví dụ đơn giản về Bút vẽ hoạt hình dọc theo một con đường của Geoff Graham (@geoffgraham) trên CodePen.
Hỗ trợ trình duyệt
thuộc offset-distancetính vẫn được coi là một tính năng thử nghiệm tại thời điểm viết bài này và không có tài liệu về hỗ trợ trình duyệt. Tuy nhiên, có tài liệu về motion-pathhỗ trợ và chúng tôi có thể sử dụng đó làm cơ sở cho thời điểm hiện tại.
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 46 | 72 | Không | 79 | Không |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Không |
thông tin thêm
- Thông số mô-đun đường dẫn chuyển động cấp 1
- Ví dụ trên CodePen
- Vé WebKit # 139128
- Vé Mozilla số 1186329
- Yêu cầu tính năng của Microsoft Edge