Thế giới hoạt hình trên web đã trở thành một khu rừng rộng lớn của các công cụ và công nghệ. Các thư viện như GSAP và Framer Motion và React Spring đã xuất hiện để giúp chúng tôi thêm chuyển động vào DOM
Tuy nhiên, phần cơ bản và quan trọng nhất là quá trình chuyển đổi CSS khiêm tốn. Đây là công cụ hoạt hình đầu tiên mà hầu hết các nhà phát triển front-end đều học và nó là một công cụ hữu ích. Ngay cả những cựu chiến binh hoạt hình hoa râm, phong hóa nhất vẫn thường xuyên sử dụng công cụ này
Có một mức độ sâu đáng ngạc nhiên cho chủ đề này. Trong hướng dẫn này, chúng ta sẽ đào sâu và tìm hiểu thêm một chút về các chuyển tiếp CSS và cách chúng ta có thể sử dụng chúng để tạo hoạt ảnh bóng bẩy, đẹp mắt
Đối tượng dự địnhHướng dẫn này dành cho các nhà phát triển thuộc mọi cấp độ kinh nghiệm có thể truy cập được. Nó có thể được coi là "Chuyển tiếp CSS 101". Điều đó nói rằng, tôi đã thêm vào một số mẩu tin thú vị và ít người biết đến - bất kể mức độ kinh nghiệm của bạn, tôi cá là bạn sẽ học được điều gì đó
Các nguyên tắc cơ bản
Thành phần chính chúng ta cần để tạo hoạt ảnh là một số CSS thay đổi
Đây là một ví dụ về một nút di chuyển khi di chuột mà không có hiệu ứng động
sân chơi mật mã
Định dạng mã bằng cách sử dụng Prettier
đặt lại mã
HTML
Hello World
.btn {
width: 100px;
height: 100px;
border-radius: 50%;
border: none;
background: slateblue;
color: white;
font-size: 20px;
font-weight: 500;
line-height: 1;
}
.btn:hover {
transform: translateY[-10px];
}
Kết quả
Làm mới khung kết quả
Bật phím 'tab'Đoạn mã này sử dụng lớp giả
4 để chỉ định một khai báo CSS bổ sung khi chuột của người dùng đặt trên nút của chúng ta, tương tự như sự kiệnHello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
5 trong JavaScriptHello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
Để dịch chuyển phần tử lên, chúng tôi sử dụng
6. Mặc dù chúng tôi có thể sử dụngHello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
7 cho việc này, nhưngHello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
8 là một công cụ tốt hơn cho công việc. Chúng ta sẽ thấy tại sao sauHello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
Theo mặc định, các thay đổi trong CSS xảy ra ngay lập tức. Trong chớp mắt, nút của chúng tôi đã dịch chuyển đến một vị trí mới. Điều này trái ngược với thế giới tự nhiên, nơi mọi thứ diễn ra dần dần
Chúng ta có thể hướng dẫn trình duyệt nội suy từ trạng thái này sang trạng thái khác bằng thuộc tính có tên thích hợp là
9Hello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
sân chơi mật mã
Định dạng mã bằng cách sử dụng Prettier
đặt lại mã
CSS HTML
Hello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
Kết quả
Làm mới khung kết quả
Bật phím 'tab'9 có thể nhận một số giá trị, nhưng chỉ cần hai giá trịHello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
Tên của tài sản chúng tôi muốn làm động
Thời lượng của hoạt hình
Nếu bạn định tạo hoạt ảnh cho nhiều thuộc tính, bạn có thể chuyển cho nó một danh sách được phân tách bằng dấu phẩy
Chọn tất cả các thuộc tínhcss
1 nhận một giá trị đặc biệt.css
2. Khicss
2 được chỉ định, bất kỳ thuộc tính CSS nào thay đổi sẽ được chuyển đổicss
Việc sử dụng giá trị này có thể rất hấp dẫn vì nó tiết kiệm cho chúng tôi một đoạn gõ tốt nếu chúng tôi đang tạo hoạt ảnh cho nhiều thuộc tính, nhưng tôi khuyên bạn không nên sử dụng nó
Khi sản phẩm của bạn phát triển, bạn [hoặc ai đó trong nhóm của bạn] có thể sẽ cập nhật mã này vào một thời điểm nào đó trong tương lai. Một hình ảnh động bất ngờ có thể trượt qua
Hoạt hình như muối bỏ bể. quá nhiều làm hỏng món ăn. Nó trả tiền để thực sự chính xác với các thuộc tính chúng tôi tạo hiệu ứng
chức năng thời gian
Khi chúng tôi yêu cầu một phần tử chuyển từ vị trí này sang vị trí khác, trình duyệt cần tìm ra từng khung "trung gian" sẽ trông như thế nào
Ví dụ. giả sử rằng chúng ta đang di chuyển một phần tử từ trái sang phải, trong khoảng thời gian 1 giây. Hoạt ảnh mượt mà sẽ chạy ở tốc độ 60 khung hình/giây * , điều đó có nghĩa là chúng ta sẽ cần tìm ra 60 vị trí riêng lẻ giữa đầu và cuối.
Hãy bắt đầu bằng cách đặt chúng cách đều nhau
Mốc thời gian
Chạy hoạt hình
Nhấp vào đây
Để làm rõ những gì đang xảy ra ở đây. mỗi vòng tròn mờ đại diện cho một khoảnh khắc trong thời gian. Khi vòng tròn di chuyển từ trái sang phải, đây là những khung được hiển thị cho người dùng. Nó giống như một cuốn sách lật
Trong hoạt ảnh này, chúng tôi đang sử dụng chức năng thời gian tuyến tính. Điều này có nghĩa là phần tử di chuyển với tốc độ không đổi;
Tiến độThời gian
Có một số chức năng thời gian có sẵn cho chúng tôi trong CSS. Chúng tôi có thể chỉ định cái nào chúng tôi muốn sử dụng với thuộc tính
4css
css
Hoặc, chúng ta có thể chuyển nó trực tiếp đến thuộc tính tốc ký
9Hello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
css
6 hiếm khi là lựa chọn tốt nhất — xét cho cùng, hầu như không có gì trong thế giới thực di chuyển theo cách này * . Hoạt hình tốt bắt chước thế giới tự nhiên, vì vậy chúng ta nên chọn thứ gì đó hữu cơ hơn.css
Hãy chạy qua các tùy chọn của chúng tôi
thả lỏng
7 lao vào như một con bò rừng, nhưng nó cạn kiệt năng lượng. Cuối cùng, nó đang lảo đảo như một con rùa buồn ngủcss
Mốc thời gian
Chạy hoạt hình
Hãy thử cọ rửa với dòng thời gian;
Nếu chúng ta vẽ biểu đồ sự dịch chuyển của phần tử theo thời gian, nó sẽ giống như thế này
Tiến độThời gian
Khi nào bạn sẽ sử dụng
7? . một phương thức xuất hiện]. Nó tạo ra hiệu ứng rằng có thứ gì đó đang hối hả từ xa tiến đến và ổn định trước mặt người dùngcss
dễ dàng trong
Không có gì ngạc nhiên khi
9 ngược lại vớicss
7. Nó bắt đầu chậm và tăng tốccss
Mốc thời gian
Chạy hoạt hình
Như chúng ta đã thấy,
7 hữu ích cho những thứ xuất hiện từ ngoài màn hình.css
9, tự nhiên, có ích cho người đối diện. di chuyển thứ gì đó vượt ra ngoài giới hạn của chế độ xemcss
Tiến độThời gian
Sự kết hợp này rất hữu ích khi có thứ gì đó vào và ra khỏi khung nhìn, giống như một phương thức. Chúng ta sẽ sớm xem xét cách kết hợp và kết hợp các chức năng thời gian
Lưu ý rằng
9 khá hữu ích dành riêng cho hoạt ảnh kết thúc bằng phần tử ngoài màn hình hoặc ẩn;css
dễ dàng ra vào
Tiếp theo,
4. Đó là sự kết hợp của hai chức năng thời gian trước đócss
Mốc thời gian
Chạy hoạt hình
Chức năng thời gian này là đối xứng. Nó có một lượng gia tốc và giảm tốc bằng nhau
Tiến độThời gian
Tôi thấy đường cong này hữu ích nhất cho bất kỳ điều gì xảy ra trong một vòng lặp [ví dụ:. một yếu tố mờ dần trong và ngoài, lặp đi lặp lại]
Đó là một bước tiến lớn so với
6, nhưng trước khi bạn bắt tay vào mọi thứ, hãy xem xét thêm một lựa chọn nữacss
xoa dịu
Nếu tôi có vấn đề khó khăn để chọn với các tác giả ngôn ngữ CSS khi chuyển đổi, thì đó là
6 được đặt tên kém. Nó không mang tính mô tả chút nào;css
Bỏ chuyện đó sang một bên,
6 thật tuyệt vời. Không giống nhưcss
4, nó không đối xứng;css
Mốc thời gian
Chạy hoạt hình
6 là giá trị mặc định — nếu bạn không chỉ định hàm thời gian, thìcss
6 sẽ được sử dụng. Thành thật mà nói, điều này cảm thấy đúng với tôi.css
6 là một lựa chọn tuyệt vời trong hầu hết các trường hợp. Nếu một phần tử di chuyển và không vào hoặc thoát khỏi chế độ xem, thìcss
6 thường là một lựa chọn tốtcss
Tiến độThời gian
Thời gian là không đổiMột lưu ý quan trọng về tất cả các bản demo này. thời gian là không đổi. Các hàm thời gian mô tả cách một giá trị sẽ nhận được từ 0 đến 1 trong một khoảng thời gian cố định, chứ không phải hoạt ảnh sẽ hoàn thành nhanh như thế nào. Một số chức năng thời gian có thể nhanh hơn hoặc chậm hơn, nhưng trong những ví dụ này, tất cả chúng đều mất chính xác 1 giây để hoàn thành
đường cong tùy chỉnh
Nếu các tùy chọn tích hợp được cung cấp không phù hợp với nhu cầu của bạn, thì bạn có thể xác định đường cong nới lỏng tùy chỉnh của riêng mình, sử dụng chức năng định giờ hình khối
css
Tất cả các giá trị chúng ta đã thấy cho đến nay thực sự chỉ là các giá trị đặt trước cho hàm
3 này. Nó có 4 số, đại diện cho 2 điểm kiểm soátcss
Các đường cong Bézier thực sự tiện lợi, nhưng chúng nằm ngoài phạm vi của hướng dẫn này. Tôi sẽ sớm viết thêm về họ
Trong thời gian chờ đợi, bạn có thể bắt đầu tạo các hàm định thời Bézier của riêng mình bằng cách sử dụng trình trợ giúp tuyệt vời này từ Lea Verou
Khi bạn nghĩ ra một đường cong hoạt hình mà bạn hài lòng, hãy nhấp vào “Sao chép” ở trên cùng và dán nó vào CSS của bạn
Bạn cũng có thể chọn từ bộ chức năng thời gian mở rộng này. mặc dù hãy cẩn thận. một số tùy chọn kỳ lạ hơn sẽ không hoạt động trong CSS
Khi bắt đầu với các đường cong Bézier tùy chỉnh, có thể khó tạo ra một đường cong tự nhiên. Tuy nhiên, với một số thực hành, đây là một công cụ biểu cảm đáng kinh ngạc
Thời gian để tôi trở nên sạch sẽTôi có một lời thú nhận những thứ đã làm. các cuộc biểu tình ở trên, hiển thị các chức năng thời gian khác nhau, đã được phóng đại
Trên thực tế, các chức năng thời gian như
9 tinh tế hơn so với mô tả, nhưng tôi muốn nhấn mạnh hiệu ứng để dễ hiểu hơn. Chức năng thời giancss
3 làm cho điều đó có thểCho xem nhiều hơncss
hiệu suất hoạt hình
Trước đó, chúng tôi đã đề cập rằng hoạt ảnh phải chạy ở tốc độ 60 khung hình/giây. Tuy nhiên, khi làm phép tính, chúng tôi nhận ra rằng điều này có nghĩa là trình duyệt chỉ có 16. 6 mili giây để vẽ từng khung hình. Đó thực sự không phải là nhiều thời gian;
Nếu hoạt ảnh của chúng ta quá tốn kém về mặt tính toán, nó sẽ có vẻ giật cục và giật cục. Khung hình sẽ bị rớt do thiết bị không theo kịp
Hãy tự mình trải nghiệm điều này bằng cách tinh chỉnh điều khiển "Khung hình mỗi giây" mới
Mốc thời gian
FPS
Chạy hoạt hình
Trên thực tế, hiệu suất kém thường ở dạng tốc độ khung hình thay đổi, vì vậy đây không phải là mô phỏng hoàn hảo
Hiệu suất hoạt hình là một lĩnh vực sâu sắc và thú vị đáng ngạc nhiên, vượt xa phạm vi của hướng dẫn giới thiệu này. Nhưng hãy đề cập đến những điều cực kỳ quan trọng, cần biết
Một số thuộc tính CSS đắt hơn nhiều để tạo hoạt ảnh so với các thuộc tính khác. Ví dụ:
6 là một thuộc tính rất đắt tiền vì nó ảnh hưởng đến bố cục. Khi chiều cao của một phần tử co lại, nó sẽ gây ra phản ứng dây chuyền;css
Các thuộc tính khác, như
7, hơi tốn kém để tạo hoạt ảnh. Chúng không ảnh hưởng đến bố cục, nhưng chúng yêu cầu một lớp sơn mới trên mọi khung hình, điều này không hề rẻcss
Hai thuộc tính —
8 vàcss
9 — rất rẻ để tạo hoạt ảnh. Nếu một hoạt ảnh hiện đang điều chỉnh một thuộc tính nhưcss
0 hoặccss
1, thì nó có thể được cải thiện đáng kể bằng cách chuyển nó sangcss
8 [mặc dù không phải lúc nào cũng có thể đạt được hiệu quả chính xác như vậy]css
Đảm bảo kiểm tra hoạt ảnh của bạn trên thiết bị cấp thấp nhất mà trang web/ứng dụng của bạn nhắm mục tiêu. Máy phát triển của bạn có thể nhanh hơn nó nhiều lần
Nếu bạn muốn tìm hiểu thêm về hiệu suất hoạt hình, tôi đã nói chuyện về chủ đề này tại React Rally. Nó đi sâu vào chủ đề này
Tăng tốc phần cứng
Tùy thuộc vào trình duyệt và hệ điều hành của bạn, bạn có thể nhận thấy một số lỗi nhỏ gây tò mò trong một số ví dụ trước đó
Hãy chú ý đến các chữ cái. Bạn có để ý rằng chúng có vẻ hơi trục trặc khi bắt đầu và kết thúc quá trình chuyển đổi, như thể mọi thứ đã được khóa vào đúng vị trí không?
Điều này xảy ra do sự chuyển giao giữa CPU và GPU của máy tính. Hãy để tôi giải thích
Khi chúng tôi tạo hoạt ảnh cho một phần tử bằng cách sử dụng
8 vàcss
9, trình duyệt đôi khi sẽ cố gắng tối ưu hóa hoạt ảnh này. Thay vì rasterize pixel trên mọi khung hình, nó chuyển mọi thứ sang GPU dưới dạng kết cấu. GPU rất giỏi trong việc thực hiện các loại chuyển đổi dựa trên kết cấu này và kết quả là chúng tôi có được hoạt ảnh rất bóng bẩy, rất hiệu quả. Điều này được gọi là "tăng tốc phần cứng"css
Đây là vấn đề. GPU và CPU hiển thị mọi thứ hơi khác một chút. Khi CPU trao nó cho GPU và ngược lại, bạn sẽ thấy mọi thứ chuyển động nhẹ
Chúng tôi có thể khắc phục sự cố này bằng cách thêm thuộc tính CSS sau
css
5 là thuộc tính cho phép chúng tôi gợi ý cho trình duyệt rằng chúng tôi sẽ tạo hoạt ảnh cho phần tử đã chọn và phần tử đó sẽ tối ưu hóa cho trường hợp nàycss
Trong thực tế, điều này có nghĩa là trình duyệt sẽ để GPU xử lý phần tử này mọi lúc. Không còn quá trình chuyển giao giữa CPU và GPU, không còn câu chuyện “đi đúng chỗ”
5 cho phép chúng tôi chủ ý về những yếu tố nào sẽ được tăng tốc phần cứng. Các trình duyệt có logic khó hiểu của riêng chúng xung quanh nội dung này và tôi không muốn để nó có cơ hộicss
Có một lợi ích khác để tăng tốc phần cứng. chúng ta có thể tận dụng kết xuất pixel phụ
Kiểm tra hai hộp này. Chúng di chuyển xuống khi bạn di chuột/tập trung chúng. Một trong số chúng được tăng tốc phần cứng và cái còn lại thì không
sân chơi mật mã
Định dạng mã bằng cách sử dụng Prettier
đặt lại mã
CSS HTML
0Hello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
Kết quả
Làm mới khung kết quả
Bật phím 'tab'Nó có thể hơi tinh tế, tùy thuộc vào thiết bị và màn hình của bạn, nhưng một hộp di chuyển trơn tru hơn nhiều so với hộp kia
Các thuộc tính như
7 không thể kết xuất pixel phụ, có nghĩa là chúng cần làm tròn đến pixel gần nhất, tạo ra hiệu ứng giật cục theo từng bước. Trong khi đó,Hello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
8 có thể chuyển đổi mượt mà giữa các pixel nhờ thủ thuật khử răng cưa của GPUđánh đổicss
Không có gì trong cuộc sống là miễn phí và khả năng tăng tốc phần cứng cũng không ngoại lệ
Bằng cách ủy thác kết xuất của một phần tử cho GPU, nó sẽ tiêu tốn nhiều bộ nhớ video hơn, một tài nguyên có thể bị hạn chế, đặc biệt là trên các thiết bị di động cấp thấp hơn
Đây không phải là vấn đề lớn như trước đây — Tôi đã thực hiện một số thử nghiệm trên Xiaomi Redmi 7A, một điện thoại thông minh giá rẻ phổ biến ở Ấn Độ và có vẻ như nó vẫn hoạt động tốt. Chỉ cần không áp dụng rộng rãi
5 cho các phần tử không di chuyển. Hãy cố ý về nơi bạn sử dụng nóthuộc tính thay thếcss
Khả năng tăng tốc phần cứng đã xuất hiện từ rất lâu—thực tế là lâu hơn cả thuộc tính
5css
Trong một thời gian dài, nó được thực hiện bằng cách sử dụng biến đổi 3D, như
1. Ngay cả với giá trị 0px, trình duyệt vẫn giao nó cho GPU, vì di chuyển trong không gian 3D chắc chắn là một thế mạnh của GPU. Ngoài ra còn cócss
2css
Khi
5 xuất hiện, nó nhằm mục đích cung cấp cho các nhà phát triển một cách thích hợp, có ý nghĩa về mặt ngữ nghĩa để gợi ý cho trình duyệt rằng một phần tử nên được tối ưu hóa. Tuy nhiên, trong những ngày đầu,css
5 đã gặp một số vấn đềcss
Thật hạnh phúc, có vẻ như tất cả những vấn đề này đã được giải quyết. Tôi đã thực hiện một số thử nghiệm và nhận thấy rằng tôi nhận được kết quả tốt nhất trên các trình duyệt hiện đại với
5. Nhưng bạn phải luôn thực hiện thử nghiệm của riêng mình để đảm bảo rằng các kỹ thuật này hoạt động trên các thiết bị và trình duyệt mà bạn nhắm mục tiêucss
trải nghiệm người dùng
Chuyển động theo hướng hành động
Hãy xem lại nút “Xin chào thế giới” đang phát triển của chúng tôi
Chào thế giới
Như hiện tại, chúng ta có một quá trình chuyển đổi "đối xứng" - hoạt ảnh nhập giống với hoạt ảnh thoát
Khi chuột di chuột qua phần tử, nó sẽ dịch chuyển lên 10 pixel trong 250 mili giây
Khi chuột di chuyển đi, phần tử sẽ dịch chuyển xuống 10 pixel trong 250 mili giây
Một chi tiết nhỏ dễ thương là cung cấp cho mỗi hành động các cài đặt chuyển tiếp của riêng nó. Đối với hoạt ảnh khi di chuột, tôi muốn làm cho hoạt ảnh nhập nhanh và linh hoạt, trong khi hoạt ảnh thoát có thể thoải mái và lờ đờ hơn một chút
sân chơi mật mã
Định dạng mã bằng cách sử dụng Prettier
đặt lại mã
HTML
0Hello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
CSS
1Hello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
Kết quả
Làm mới khung kết quả
Một ví dụ phổ biến khác là phương thức. Nó có thể hữu ích cho các phương thức nhập với hoạt ảnh
7 và thoát ra với hoạt ảnhcss
9 nhanh hơncss
Kích hoạt
Đây là một chi tiết nhỏ, nhưng nó nói lên một ý tưởng lớn hơn nhiều
Tôi tin rằng hầu hết các nhà phát triển nghĩ về các trạng thái. ví dụ: bạn có thể xem tình huống này và nói rằng chúng tôi có trạng thái “hover” và trạng thái mặc định. Thay vào đó, điều gì sẽ xảy ra nếu chúng ta nghĩ về hành động? . Chúng tôi có hoạt ảnh nhập chuột và hoạt ảnh rời chuột
Tobias Ahlin cho thấy cách ý tưởng này có thể tạo hoạt ảnh có ý nghĩa ngữ nghĩa ở cấp độ tiếp theo trong bài đăng trên blog của anh ấy, Chuyển động có ý nghĩa vui vẻ với Hoạt ảnh theo hướng hành động
Sự chậm trễ
Chà, chúng ta đã đi khá xa trong hành trình trở nên thành thạo với các hiệu ứng chuyển đổi CSS, nhưng còn một số chi tiết cuối cùng cần xem qua. Hãy nói về sự chậm trễ chuyển đổi
Tôi tin rằng gần như tất cả mọi người đã từng có trải nghiệm khó chịu này trước đây
Hình ảnh lịch sự của Ben Kamens
Là một nhà phát triển, bạn có thể tìm ra lý do tại sao điều này xảy ra. danh sách thả xuống chỉ mở khi được di chuột. Khi chúng tôi di chuyển chuột theo đường chéo để chọn một đứa trẻ, con trỏ của chúng tôi sẽ vượt ra ngoài giới hạn và menu sẽ đóng lại
Vấn đề này có thể được giải quyết theo một cách khá tao nhã mà không cần phải tiếp cận với JS. Chúng ta có thể sử dụng
8css
css
8 cho phép chúng tôi giữ nguyên hiện trạng trong một khoảng thời gian ngắn. Trong trường hợp này, khi người dùng di chuyển chuột ra ngoàicss
00, không có gì xảy ra trong 300 mili giây. Nếu chuột của họ nhập lại phần tử trong cửa sổ 300 mili giây đó, quá trình chuyển đổi sẽ không bao giờ diễn raHello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
Sau 300 mili giây trôi qua,
9 khởi động bình thường và trình đơn thả xuống mờ dần sau 400 mili giâyTại sao không có tốc ký?Hello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
Cho đến nay, chúng tôi đã sử dụng tốc ký
9 để gộp tất cả các giá trị liên quan đến quá trình chuyển đổi của chúng tôi lại với nhau.Hello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
8 cũng có thể được sử dụng với tốc kýcss
Hiển thị thêmcss
Doom nhấp nháy
Khi một phần tử được di chuyển lên hoặc xuống khi di chuột, chúng ta cần hết sức cẩn thận để không vô tình tạo ra "nhấp nháy doom"
Cảnh báo. GIF này bao gồm chuyển động nhấp nháy có khả năng gây co giật cho những người mắc chứng động kinh nhạy cảm với ánh sáng
Bộc lộBạn có thể đã nhận thấy một hiệu ứng tương tự trên một số bản trình diễn trên trang này
Sự cố xảy ra khi chuột ở gần ranh giới của phần tử. Hiệu ứng di chuột đưa phần tử ra khỏi bên dưới con chuột, khiến nó rơi trở lại bên dưới con chuột, khiến hiệu ứng di chuột kích hoạt lại… nhiều lần trong một giây
Làm thế nào để chúng tôi giải quyết cho điều này? . Đây là một ví dụ nhanh
sân chơi mật mã
Định dạng mã bằng cách sử dụng Prettier
đặt lại mã
CSS HTML
2Hello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
Kết quả
Làm mới khung kết quả
Bật phím 'tab'04 của chúng ta giờ đã có một đứa con mới,Hello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
05. Khoảng này chứa tất cả các kiểu mỹ phẩm [màu nền, phông chữ, v.v.]Hello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
Khi chúng tôi di chuột qua nút đơn giản, nó sẽ khiến đứa trẻ nhìn ra phía trên. Tuy nhiên, nút này đứng yên
Hãy thử bỏ ghi chú
06 để xem chính xác điều gì đang xảy raHello World
.btn {
/*
All of the base styles have
moved to the “CSS” tab above.
*/
transition: transform 250ms;
}
.btn:hover {
transform: translateY[-10px];
}
Tôn trọng sở thích chuyển động
Khi tôi nhìn thấy một hình ảnh động được thiết kế đẹp mắt trên web, tôi sẽ phản ứng một cách thích thú và hân hoan. Tuy nhiên, mọi người đều khác nhau và một số người có phản ứng rất khác. buồn nôn và khó chịu
Trước đây tôi đã viết về việc tôn trọng “ưu tiên giảm chuyển động”, một cài đặt cấp hệ điều hành mà người dùng có thể chuyển đổi để thể hiện sở thích ít chuyển động hơn. Hãy áp dụng những bài học đó ở đây, bằng cách tắt hoạt ảnh cho những người yêu cầu
css
Điều chỉnh nhỏ này có nghĩa là hoạt ảnh sẽ giải quyết ngay lập tức cho những người dùng đã truy cập tùy chọn hệ thống của họ và bật hộp kiểm
Là nhà phát triển front-end, chúng tôi có trách nhiệm nhất định để đảm bảo rằng các sản phẩm của chúng tôi không gây hại. Đây là một bước nhanh chóng mà chúng tôi có thể thực hiện để làm cho các trang web/ứng dụng của mình trở nên thân thiện và an toàn hơn
Bức tranh lớn hơn
Chuyển đổi CSS là cơ bản, nhưng điều đó không có nghĩa là chúng dễ dàng. Chúng có chiều sâu đáng ngạc nhiên;
Hoạt hình web quan trọng hơn hầu hết các nhà phát triển nhận ra. Một chuyển đổi duy nhất ở đây hoặc ở đó sẽ không tạo ra hoặc phá vỡ trải nghiệm, nhưng nó bổ sung. Nhìn chung, hoạt ảnh được thực hiện tốt có thể có tác động sâu sắc đáng ngạc nhiên đến trải nghiệm người dùng tổng thể
Chuyển đổi có thể làm cho một ứng dụng cảm thấy "thật". Họ có thể đưa ra phản hồi và giao tiếp theo cách trực quan hơn là chỉ sao chép. Họ có thể hướng dẫn mọi người cách sử dụng sản phẩm của bạn. Họ có thể khơi dậy niềm vui
Vì vậy, tôi có một lời thú nhận để thực hiện. hướng dẫn này được lấy trực tiếp từ khóa học CSS của tôi, CSS dành cho nhà phát triển JavaScript. Nếu bạn thấy hướng dẫn này hữu ích, bạn nên biết rằng đây chỉ là phần nổi của tảng băng trôi
Khóa học của tôi được thiết kế để giúp bạn tự tin với CSS. Chúng tôi khám phá cách ngôn ngữ thực sự hoạt động, xây dựng một mô hình tinh thần mà bạn có thể sử dụng để giải quyết mọi thách thức về bố cục/giao diện người dùng
Nó không giống như bất kỳ khóa học nào khác mà bạn đã tham gia. Nó được xây dựng trên cùng một ngăn xếp công nghệ như blog này và do đó, có rất nhiều nội dung tương tác phong phú, ngoài ra còn có các video nhỏ, rất nhiều bài tập và các dự án lấy cảm hứng từ thế giới thực nơi bạn có thể kiểm tra kiến thức của mình. Thậm chí còn có một số trò chơi nhỏ
Tìm hiểu thêm và xem bạn có được hưởng lợi từ nó không tại https. //css-for-js. nhà phát triển
Cuối cùng, không có bài học tương tác nào hoàn chỉnh nếu không có Chế độ Hộp cát. Chơi với tất cả các cài đặt trước đó [và một vài cài đặt mới. ] và tạo một số tác phẩm nghệ thuật với tiện ích kết thúc mở này