Trượt văn bản từ trái sang phải CSS

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

Nội dung chính Show

Các nguyên tắc cơ bản
sân chơi mật mã
sân chơi mật mã
chức năng thời gian
thả lỏng
dễ dàng trong
dễ dàng ra vào
đường cong tùy chỉnh
hiệu suất hoạt hình
Tăng tốc phần cứng
sân chơi mật mã
trải nghiệm người dùng
Chuyển động theo hướng hành động
sân chơi mật mã
Sự chậm trễ
Doom nhấp nháy
sân chơi mật mã
Tôn trọng sở thích chuyển động
Bức tranh lớn hơn

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ự định

Hướ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

<button class="btn">
  Hello World
button>
<style>
  .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);
  }
style>

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ả

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

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

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

5 trong JavaScript

Để dịch chuyển phần tử lên, chúng tôi sử dụng

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

6. Mặc dù chúng tôi có thể sử dụng

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

7 cho việc này, nhưng

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

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 sau

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à

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

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

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

Kết quả

Làm mới khung kết quả

Bật phím 'tab'

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

9 có thể nhận một số giá trị, nhưng chỉ cần hai giá trị

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

css

Chọn tất cả các thuộc tính

css

1 nhận một giá trị đặc biệt.

css

2. Khi

css

2 được chỉ định, bất kỳ thuộc tính CSS nào thay đổi sẽ được chuyển đổi

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

css

Hoặc, chúng ta có thể chuyển nó trực tiếp đến thuộc tính tốc ký

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

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.

Hãy chạy qua các tùy chọn của chúng tôi

thả lỏng

css

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ủ

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

css

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

dễ dàng trong

Không có gì ngạc nhiên khi

css

9 ngược lại với

css

7. Nó bắt đầu chậm và tăng tốc

Mốc thời gian

Chạy hoạt hình

Như chúng ta đã thấy,

css

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ế độ xem

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

css

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;

dễ dàng ra vào

Tiếp theo,

css

4. Đó là sự kết hợp của hai chức năng thời gian trước đó

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

css

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

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à

css

6 được đặt tên kém. Nó không mang tính mô tả chút nào;

Bỏ chuyện đó sang một bên,

css

6 thật tuyệt vời. Không giống như

css

4, nó không đối xứng;

Mốc thời gian

Chạy hoạt hình

css

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

Tiến độThời gian

Thời gian là không đổi

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

css

3 này. Nó có 4 số, đại diện cho 2 điểm kiểm soát

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ư

css

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 gian

css

3 làm cho điều đó có thể

Cho xem nhiều hơn

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ụ:
```
css
```
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;
Các thuộc tính khác, như
```
css
```
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ẻ
Hai thuộc tính —
```
css
```
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ặc
```
css
```
1, thì nó có thể được cải thiện đáng kể bằng cách chuyển nó sang
```
css
```
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)
Đả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

css

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"

Đâ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ày

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

css

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

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

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

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ư

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

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 đó,

css

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 đổi

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

css

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ế

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

css

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ư

css

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

Khi

css

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

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

css

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

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

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

CSS

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

Kết quả

Làm mới khung kết quả

Bật phím 'tab'

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

css

7 và thoát ra với hoạt ảnh

css

9 nhanh hơn

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

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

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

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 ra

Sau 300 mili giây trôi qua,

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

9 khởi động bình thường và trình đơn thả xuống mờ dần sau 400 mili giây

Tại sao không có tốc ký?

Cho đến nay, chúng tôi đã sử dụng tốc ký

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

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.

css

8 cũng có thể được sử dụng với tốc ký

css

Hiển thị thêm

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

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

Kết quả

Làm mới khung kết quả

Bật phím 'tab'

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

04 của chúng ta giờ đã có một đứa con mới,

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

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

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ú

<button class="btn">
  Hello World
button>
<style>
  .btn {
    /*
      All of the base styles have
      moved to the “CSS” tab above.
    */
    transition: transform 250ms;
  }
  
  .btn:hover {
    transform: translateY(-10px);
  }
style>

06 để xem chính xác điều gì đang xảy ra

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

programming css

Trượt văn bản từ trái sang phải CSS

Các nguyên tắc cơ bản

sân chơi mật mã

sân chơi mật mã

chức năng thời gian

thả lỏng

dễ dàng trong

dễ dàng ra vào

xoa dịu

đường cong tùy chỉnh

hiệu suất hoạt hình

Tăng tốc phần cứng

sân chơi mật mã

trải nghiệm người dùng

Chuyển động theo hướng hành động

sân chơi mật mã

Sự chậm trễ

Doom nhấp nháy

sân chơi mật mã

Tôn trọng sở thích chuyển động

Bức tranh lớn hơn

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội