Hoạt hình CSS khung hình chính là gì?

Louis là nhà phát triển giao diện người dùng, nhà văn và tác giả có trụ sở tại Toronto, Canada. Anh ấy quản lý các bản tin Công cụ web hàng tuần và Năng suất công nghệ và viết blog về … Thông tin thêm về Louis ↬

Bản tin email

Mẹo hàng tuần về giao diện người dùng & UX.
Được hơn 200.000 người tin cậy.

• Giao diện người dùng SmashingConf 2023

• Các mẫu thiết kế giao diện Đào tạo UX

• Lớp học tổng thể về nguyên tắc phổ quát của kiểu chữ với Elliot Jay Stocks

• Bắt đầu miễn phí

• Khung hình chính CSS Cảnh phong cảnh hoạt hình

  Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

  Gặp gỡ Hội thảo trực tuyến Smashing về giao diện người dùng & giao diện người dùng, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Stephanie Troeth và rất nhiều người khác

  Chuyển đến hội thảo ↬

  Một cảnh phong cảnh hoạt hình đơn giản

  Với mục đích của bài viết này, tôi đã tạo một cảnh phong cảnh hoạt hình đơn giản để giới thiệu các khía cạnh khác nhau của cú pháp. Bạn có thể xem trang demo để biết ý tưởng về những gì tôi sẽ mô tả. Trang bao gồm một thanh bên hiển thị mã CSS được sử dụng cho các yếu tố khác nhau (mặt trời, mặt trăng, bầu trời, mặt đất và đám mây). Hãy xem nhanh và sau đó làm theo khi tôi mô tả các phần khác nhau của mô-đun hoạt hình CSS3

  (GHI CHÚ. Các phiên bản Safari trước 5. 1 có lỗi khiến hoạt ảnh không hoàn thành chính xác. Xem thêm dưới tiêu đề “The Animation’s Fill Mode”. )

  Tôi sẽ mô tả CSS chỉ liên quan đến một trong các phần tử. mặt trời hoạt hình. Điều đó đủ để giúp bạn hiểu rõ về hoạt ảnh dựa trên khung hình chính. Đối với các yếu tố khác trong bản trình diễn, bạn có thể kiểm tra mã trên trang trình diễn bằng cách sử dụng các tab

  Quy tắc tại @keyframes

  Điều bất thường đầu tiên mà bạn sẽ nhận thấy về bất kỳ mã hoạt ảnh CSS3 nào là quy tắc

  @keyframes sunrise {
     0% {
        bottom: 0;
        left: 340px;
        background: #f00;
     }
  
     33% {
        bottom: 340px;
        left: 340px;
        background: #ffd630;
     }
  
     66% {
        bottom: 340px;
        left: 40px;
        background: #ffd630;
     }
  
     100% {
        bottom: 0;
        left: 40px;
        background: #f00;
     }
  }

  2 @. Theo thông số kỹ thuật, quy tắc CSS @ chuyên biệt này được theo sau bởi một mã định danh (do nhà phát triển chọn) được tham chiếu trong một phần khác của CSS

  Quy tắc @ và mã định danh của nó sau đó được theo sau bởi một số bộ quy tắc (i. e. quy tắc kiểu với các khối khai báo, như trong mã CSS bình thường). Đoạn bộ quy tắc này được phân tách bằng dấu ngoặc nhọn, lồng bộ quy tắc bên trong quy tắc @, giống như bạn thấy với các quy tắc @ khác

  Đây là quy tắc @ mà chúng ta sẽ sử dụng

  @keyframes sunrise {
      /* rule sets go here … */
  }

  Từ

  @keyframes sunrise {
     0% {
        bottom: 0;
        left: 340px;
        background: #f00;
     }
  
     33% {
        bottom: 340px;
        left: 340px;
        background: #ffd630;
     }
  
     66% {
        bottom: 340px;
        left: 40px;
        background: #ffd630;
     }
  
     100% {
        bottom: 0;
        left: 40px;
        background: #f00;
     }
  }

  3 là một định danh do chúng tôi lựa chọn mà chúng tôi sẽ sử dụng để chỉ hoạt ảnh này

  Lưu ý rằng tôi đang sử dụng không sử dụng bất kỳ tiền tố nhà cung cấp nào cho tất cả các ví dụ mã ở đây và trong bản trình diễn. Tôi sẽ thảo luận về hỗ trợ trình duyệt ở cuối bài viết này, nhưng bây giờ bạn chỉ cần nhận ra rằng hiện tại không có trình duyệt nào hỗ trợ cú pháp tiêu chuẩn này, vì vậy để mã hoạt động, bạn phải bao gồm tất cả các tiền tố của nhà cung cấp

  Bộ chọn khung chính

  Hãy thêm một số bộ quy tắc bên trong quy tắc @

  @keyframes sunrise {
     0% {
        bottom: 0;
        left: 340px;
        background: #f00;
     }
  
     33% {
        bottom: 340px;
        left: 340px;
        background: #ffd630;
     }
  
     66% {
        bottom: 340px;
        left: 40px;
        background: #ffd630;
     }
  
     100% {
        bottom: 0;
        left: 40px;
        background: #f00;
     }
  }

  Với việc bổ sung các bộ quy tắc mới đó, chúng tôi đã giới thiệu bộ chọn khung hình chính. Trong ví dụ mã ở trên, bộ chọn khung hình chính là

  @keyframes sunrise {
     0% {
        bottom: 0;
        left: 340px;
        background: #f00;
     }
  
     33% {
        bottom: 340px;
        left: 340px;
        background: #ffd630;
     }
  
     66% {
        bottom: 340px;
        left: 40px;
        background: #ffd630;
     }
  
     100% {
        bottom: 0;
        left: 40px;
        background: #f00;
     }
  }

  4,

  @keyframes sunrise {
     0% {
        bottom: 0;
        left: 340px;
        background: #f00;
     }
  
     33% {
        bottom: 340px;
        left: 340px;
        background: #ffd630;
     }
  
     66% {
        bottom: 340px;
        left: 40px;
        background: #ffd630;
     }
  
     100% {
        bottom: 0;
        left: 40px;
        background: #f00;
     }
  }

  5,

  @keyframes sunrise {
     0% {
        bottom: 0;
        left: 340px;
        background: #f00;
     }
  
     33% {
        bottom: 340px;
        left: 340px;
        background: #ffd630;
     }
  
     66% {
        bottom: 340px;
        left: 40px;
        background: #ffd630;
     }
  
     100% {
        bottom: 0;
        left: 40px;
        background: #f00;
     }
  }

  6 và

  @keyframes sunrise {
     0% {
        bottom: 0;
        left: 340px;
        background: #f00;
     }
  
     33% {
        bottom: 340px;
        left: 340px;
        background: #ffd630;
     }
  
     66% {
        bottom: 340px;
        left: 40px;
        background: #ffd630;
     }
  
     100% {
        bottom: 0;
        left: 40px;
        background: #f00;
     }
  }

  7. Bộ chọn

  @keyframes sunrise {
     0% {
        bottom: 0;
        left: 340px;
        background: #f00;
     }
  
     33% {
        bottom: 340px;
        left: 340px;
        background: #ffd630;
     }
  
     66% {
        bottom: 340px;
        left: 40px;
        background: #ffd630;
     }
  
     100% {
        bottom: 0;
        left: 40px;
        background: #f00;
     }
  }

  4 và

  @keyframes sunrise {
     0% {
        bottom: 0;
        left: 340px;
        background: #f00;
     }
  
     33% {
        bottom: 340px;
        left: 340px;
        background: #ffd630;
     }
  
     66% {
        bottom: 340px;
        left: 40px;
        background: #ffd630;
     }
  
     100% {
        bottom: 0;
        left: 40px;
        background: #f00;
     }
  }

  7 có thể được thay thế bằng từ khóa “từ” và “đến” tương ứng và bạn sẽ nhận được kết quả tương tự

  Mỗi bộ trong số bốn bộ quy tắc trong ví dụ này đại diện cho một ảnh chụp nhanh khác nhau của phần tử hoạt ảnh, với các kiểu xác định giao diện của phần tử tại thời điểm đó trong hoạt ảnh. Các điểm không được xác định (ví dụ: từ 34% đến 65%) bao gồm giai đoạn chuyển tiếp giữa các kiểu đã xác định

  Mặc dù thông số kỹ thuật vẫn đang được phát triển, một số quy tắc đã được xác định mà tác nhân người dùng nên tuân theo. Ví dụ: thứ tự của các khung hình chính không thực sự quan trọng. Các khung hình chính sẽ phát theo thứ tự được chỉ định bởi các giá trị phần trăm và không nhất thiết phải theo thứ tự chúng xuất hiện. Do đó, nếu bạn đặt khung hình chính “đến” trước khung hình chính “từ”, hoạt ảnh vẫn phát theo cách tương tự. Ngoài ra, nếu “đến” hoặc “từ” (hoặc tương đương dựa trên tỷ lệ phần trăm của nó) không được khai báo, trình duyệt sẽ tự động xây dựng nó. Vì vậy, các bộ quy tắc bên trong quy tắc @ không bị chi phối bởi tầng mà bạn tìm thấy trong các bộ quy tắc CSS thông thường

  Các khung hình chính làm sinh động mặt trời

  Với mục đích tạo hoạt ảnh cho mặt trời trong bản trình diễn này, tôi đã đặt bốn khung hình chính. Như đã đề cập, mã ở trên bao gồm các nhận xét mô tả các thay đổi

  Trong khung hình chính đầu tiên, mặt trời có màu đỏ (như thể nó vừa mọc hoặc lặn) và nó nằm dưới mặt đất (i. e. không thể thây). Đương nhiên, bản thân phần tử phải được định vị tương đối hoặc tuyệt đối để các giá trị

  @keyframes sunrise {
      /* rule sets go here … */
  }

  00 và

  @keyframes sunrise {
      /* rule sets go here … */
  }

  01 có hiệu lực. Tôi cũng đã sử dụng chỉ mục z để xếp các phần tử (ví dụ: để đảm bảo rằng mặt đất nằm trên mặt trời). Hãy lưu ý rằng các kiểu duy nhất được hiển thị trong khung hình chính là các kiểu hoạt ảnh. Các kiểu khác (chẳng hạn như

  @keyframes sunrise {
      /* rule sets go here … */
  }

  02 và

  @keyframes sunrise {
      /* rule sets go here … */
  }

  03, không hoạt hình) được khai báo ở nơi khác trong biểu định kiểu và do đó không được hiển thị ở đây

  @keyframes sunrise {
      /* rule sets go here … */
  }

  0

  Khoảng một phần ba chặng đường của hoạt ảnh (33%), mặt trời nằm trên cùng một mặt phẳng nằm ngang nhưng đã mọc lên và chuyển sang màu vàng cam (để thể hiện toàn bộ ánh sáng ban ngày)

  @keyframes sunrise {
      /* rule sets go here … */
  }

  5

  Sau đó, ở khoảng hai phần ba trong hoạt ảnh (66%), mặt trời đã di chuyển sang trái khoảng 300 pixel nhưng vẫn nằm trên cùng một mặt phẳng thẳng đứng. Lưu ý điều gì đó khác trong khung hình chính 66%. Tôi đã lặp lại cùng một màu từ khung hình chính 33% để giữ cho mặt trời không chuyển sang màu đỏ quá sớm

  @keyframes sunrise {
      /* rule sets go here … */
  }

  6

  Cuối cùng, mặt trời dần chuyển sang trạng thái cuối cùng (màu đỏ hoàn toàn) khi nó biến mất dưới mặt đất

  @keyframes sunrise {
      /* rule sets go here … */
  }

  7

  Liên kết tên hoạt hình với một phần tử

  Đây là đoạn mã tiếp theo chúng tôi sẽ thêm vào ví dụ của mình. Nó liên kết tên hoạt ảnh (trong trường hợp này là từ

  @keyframes sunrise {
     0% {
        bottom: 0;
        left: 340px;
        background: #f00;
     }
  
     33% {
        bottom: 340px;
        left: 340px;
        background: #ffd630;
     }
  
     66% {
        bottom: 340px;
        left: 40px;
        background: #ffd630;
     }
  
     100% {
        bottom: 0;
        left: 40px;
        background: #f00;
     }
  }

  3) với một phần tử cụ thể trong HTML của chúng ta

  @keyframes sunrise {
      /* rule sets go here … */
  }

  9

  Ở đây chúng tôi đang giới thiệu thuộc tính

  @keyframes sunrise {
      /* rule sets go here … */
  }

  05. Giá trị của thuộc tính này phải khớp với mã định danh trong quy tắc

  @keyframes sunrise {
      /* rule sets go here … */
  }

  06 hiện có, nếu không sẽ không có hoạt ảnh nào xảy ra. Trong một số trường hợp, bạn có thể sử dụng JavaScript để đặt giá trị của nó thành

  @keyframes sunrise {
      /* rule sets go here … */
  }

  07 (từ khóa duy nhất đã được dành riêng cho thuộc tính này) để ngăn hoạt ảnh xảy ra

  Đối tượng mà chúng tôi đã nhắm mục tiêu là một phần tử có id là

  @keyframes sunrise {
      /* rule sets go here … */
  }

  08 và lớp là

  @keyframes sunrise {
      /* rule sets go here … */
  }

  09. Lý do tôi tăng gấp đôi id và lớp như thế này là để tôi có thể sử dụng tập lệnh để thêm tên lớp

  @keyframes sunrise {
      /* rule sets go here … */
  }

  09. Trong bản trình diễn, tôi đã bắt đầu trang tĩnh; . Điều này sẽ kích hoạt tất cả các hoạt ảnh cùng một lúc và sẽ cho phép người dùng kiểm soát hoạt ảnh

  Tất nhiên, đó chỉ là một cách để làm điều đó. Như trường hợp của bất kỳ thứ gì trong CSS hoặc JavaScript, có nhiều cách khác để thực hiện điều tương tự

  Chức năng thời lượng và thời gian của hoạt ảnh

  Hãy thêm hai dòng nữa vào CSS của chúng ta

  @keyframes sunrise {
     0% {
        bottom: 0;
        left: 340px;
        background: #f00;
     }
  
     33% {
        bottom: 340px;
        left: 340px;
        background: #ffd630;
     }
  
     66% {
        bottom: 340px;
        left: 40px;
        background: #ffd630;
     }
  
     100% {
        bottom: 0;
        left: 40px;
        background: #f00;
     }
  }

  7

  Bạn có thể chỉ định thời lượng của hoạt ảnh bằng thuộc tính

  @keyframes sunrise {
      /* rule sets go here … */
  }

  52. Thời lượng biểu thị thời gian cần thiết để hoàn thành một lần lặp lại hoạt ảnh. Bạn có thể biểu thị giá trị này bằng giây (ví dụ:

  @keyframes sunrise {
      /* rule sets go here … */
  }

  53), mili giây (

  @keyframes sunrise {
      /* rule sets go here … */
  }

  54) và giây ở dạng ký hiệu thập phân (

  @keyframes sunrise {
      /* rule sets go here … */
  }

  55)

  Thông số kỹ thuật dường như không chỉ định tất cả các đơn vị đo thời gian có sẵn. Tuy nhiên, có vẻ như không ai cần bất cứ thứ gì dài hơn vài giây;

  Thuộc tính

  @keyframes sunrise {
      /* rule sets go here … */
  }

  56, khi được khai báo cho toàn bộ hoạt ảnh, cho phép bạn xác định cách hoạt ảnh tiến triển qua một lần lặp duy nhất của hoạt ảnh. Các giá trị cho

  @keyframes sunrise {
      /* rule sets go here … */
  }

  56 là

  @keyframes sunrise {
      /* rule sets go here … */
  }

  58,

  @keyframes sunrise {
      /* rule sets go here … */
  }

  59,

  @keyframes sunrise {
      /* rule sets go here … */
  }

  60,

  @keyframes sunrise {
      /* rule sets go here … */
  }

  61 và nhiều giá trị khác,

  Ví dụ của chúng tôi, tôi đã chọn

  @keyframes sunrise {
      /* rule sets go here … */
  }

  58, đây là giá trị mặc định. Vì vậy, trong trường hợp này, chúng ta có thể loại bỏ thuộc tính và hoạt ảnh sẽ giống như vậy

  Ngoài ra, bạn có thể áp dụng chức năng thời gian cụ thể cho từng khung hình chính, như thế này

  @keyframes sunrise {
     0% {
        bottom: 0;
        left: 340px;
        background: #f00;
     }
  
     33% {
        bottom: 340px;
        left: 340px;
        background: #ffd630;
     }
  
     66% {
        bottom: 340px;
        left: 40px;
        background: #ffd630;
     }
  
     100% {
        bottom: 0;
        left: 40px;
        background: #f00;
     }
  }

  9

  Một chức năng thời gian riêng biệt xác định từng khung hình chính ở trên. Một trong số đó là giá trị

  @keyframes sunrise {
      /* rule sets go here … */
  }

  63, làm giật hình ảnh động về phía trước một số bước được xác định trước. Khung hình chính cuối cùng (

  @keyframes sunrise {
     0% {
        bottom: 0;
        left: 340px;
        background: #f00;
     }
  
     33% {
        bottom: 340px;
        left: 340px;
        background: #ffd630;
     }
  
     66% {
        bottom: 340px;
        left: 40px;
        background: #ffd630;
     }
  
     100% {
        bottom: 0;
        left: 40px;
        background: #f00;
     }
  }

  7 hoặc

  @keyframes sunrise {
      /* rule sets go here … */
  }

  65) cũng có chức năng định thời gian riêng, nhưng vì nó dành cho trạng thái cuối cùng của hoạt ảnh phát tiếp nên chức năng định thời chỉ áp dụng nếu hoạt ảnh được phát ngược lại

  Trong ví dụ của chúng tôi, chúng tôi sẽ không xác định chức năng thời gian cụ thể cho từng khung hình chính, nhưng điều này đủ để cho thấy rằng có thể

  Số lần lặp lại và hướng của hoạt hình

  Bây giờ hãy thêm hai dòng nữa vào CSS của chúng ta

  @keyframes sunrise {
     0% {
        bottom: 0;
        left: 340px;
        background: #f00;
     }
  
     33% {
        bottom: 340px;
        left: 340px;
        background: #ffd630;
     }
  
     66% {
        bottom: 340px;
        left: 40px;
        background: #ffd630;
     }
  
     100% {
        bottom: 0;
        left: 40px;
        background: #f00;
     }
  }

  3

  Điều này giới thiệu thêm hai thuộc tính. một thông báo cho hoạt ảnh biết số lần phát và một thông báo cho trình duyệt biết có nên thay thế chuỗi khung trên nhiều lần lặp lại hay không

  Thuộc tính

  @keyframes sunrise {
      /* rule sets go here … */
  }

  66 được đặt thành

  @keyframes sunrise {
      /* rule sets go here … */
  }

  67, nghĩa là hoạt ảnh sẽ chỉ phát một lần. Thuộc tính này chấp nhận một giá trị số nguyên hoặc

  @keyframes sunrise {
      /* rule sets go here … */
  }

  68

  Ngoài ra, thuộc tính

  @keyframes sunrise {
      /* rule sets go here … */
  }

  69 được đặt thành

  @keyframes sunrise {
      /* rule sets go here … */
  }

  70 (mặc định), có nghĩa là hoạt ảnh sẽ phát theo cùng một hướng (từ đầu đến cuối) mỗi khi chạy. Trong ví dụ của chúng tôi, hoạt ảnh được đặt để chỉ chạy một lần, vì vậy thuộc tính là không cần thiết. Giá trị khác mà chúng ta có thể chỉ định ở đây là

  @keyframes sunrise {
      /* rule sets go here … */
  }

  71, làm cho hoạt ảnh phát ngược lại trên mỗi lần lặp lại khác. Đương nhiên, để giá trị

  @keyframes sunrise {
      /* rule sets go here … */
  }

  71 có hiệu lực, số lần lặp cần phải có giá trị từ

  @keyframes sunrise {
      /* rule sets go here … */
  }

  73 trở lên

  Độ trễ và trạng thái phát của hoạt hình

  Hãy thêm hai dòng mã khác

  @keyframes sunrise {
     0% {
        bottom: 0;
        left: 340px;
        background: #f00;
     }
  
     33% {
        bottom: 340px;
        left: 340px;
        background: #ffd630;
     }
  
     66% {
        bottom: 340px;
        left: 40px;
        background: #ffd630;
     }
  
     100% {
        bottom: 0;
        left: 40px;
        background: #f00;
     }
  }

  0

  Đầu tiên, chúng tôi giới thiệu thuộc tính

  @keyframes sunrise {
      /* rule sets go here … */
  }

  74, thuộc tính này thực hiện chính xác những gì bạn nghĩ. nó cho phép bạn trì hoãn hoạt ảnh trong một khoảng thời gian đã đặt. Thật thú vị, thuộc tính này có thể có giá trị âm, di chuyển điểm bắt đầu giữa chừng hoạt ảnh theo giá trị âm

  Thuộc tính

  @keyframes sunrise {
      /* rule sets go here … */
  }

  75, từ thông số kỹ thuật, chấp nhận một trong hai giá trị có thể.

  @keyframes sunrise {
      /* rule sets go here … */
  }

  76 và

  @keyframes sunrise {
      /* rule sets go here … */
  }

  77. Giá trị này đã hạn chế sử dụng thực tế. Giá trị mặc định là

  @keyframes sunrise {
      /* rule sets go here … */
  }

  76 và giá trị

  @keyframes sunrise {
      /* rule sets go here … */
  }

  77 chỉ đơn giản là làm cho hoạt ảnh bắt đầu ở trạng thái tạm dừng cho đến khi hoạt ảnh được phát theo cách thủ công. Bạn không thể chỉ định trạng thái

  @keyframes sunrise {
      /* rule sets go here … */
  }

  77 trong CSS cho một khung hình chính riêng lẻ;

  Chế độ điền của hoạt hình

  Chúng tôi sẽ thêm một dòng nữa vào mã của mình, thuộc tính để xác định “chế độ điền”

  @keyframes sunrise {
     0% {
        bottom: 0;
        left: 340px;
        background: #f00;
     }
  
     33% {
        bottom: 340px;
        left: 340px;
        background: #ffd630;
     }
  
     66% {
        bottom: 340px;
        left: 40px;
        background: #ffd630;
     }
  
     100% {
        bottom: 0;
        left: 40px;
        background: #f00;
     }
  }

  1

  Thuộc tính

  @keyframes sunrise {
      /* rule sets go here … */
  }

  91 cho phép bạn xác định kiểu của phần tử hoạt ảnh trước và/hoặc sau khi hoạt ảnh thực thi. Giá trị của

  @keyframes sunrise {
      /* rule sets go here … */
  }

  92 làm cho các kiểu trong khung hình chính đầu tiên được áp dụng trước khi hoạt ảnh chạy. Giá trị của

  @keyframes sunrise {
      /* rule sets go here … */
  }

  93 làm cho các kiểu trong khung hình chính cuối cùng được áp dụng sau khi hoạt ảnh chạy. Giá trị của

  @keyframes sunrise {
      /* rule sets go here … */
  }

  94 thực hiện cả hai

  CẬP NHẬT. Thuộc tính

  @keyframes sunrise {
      /* rule sets go here … */
  }

  91 không có trong bản nháp mới nhất của thông số kỹ thuật, nhưng nó được tìm thấy trong. Ngoài ra, một số phiên bản Safari (5. 0 trở lên) sẽ chỉ áp dụng giá trị "chuyển tiếp" nếu có chính xác hai khung hình chính được xác định. Các trình duyệt này dường như luôn sử dụng khung hình chính thứ 2 làm trạng thái "chuyển tiếp", đây không phải là cách các trình duyệt khác thực hiện; . Điều này đã được sửa trong Safari 5. 1

  tốc ký

  Cuối cùng, đặc tả mô tả cho hoạt ảnh, kết hợp sáu thuộc tính được mô tả ở trên. Điều này bao gồm mọi thứ ngoại trừ

  @keyframes sunrise {
      /* rule sets go here … */
  }

  75 và

  @keyframes sunrise {
      /* rule sets go here … */
  }

  91

  Một số lưu ý trên trang demo và hỗ trợ trình duyệt

  Như đã đề cập, mã trong bài viết này chỉ dành cho tạo hoạt ảnh cho một thành phần duy nhất trong bản trình diễn. mặt trời. Để xem mã đầy đủ, hãy truy cập trang demo. Bạn có thể xem tất cả nguồn cùng nhau hoặc sử dụng các tab trong thanh bên để xem mã cho các thành phần riêng lẻ trong hoạt ảnh

  Bản trình diễn không sử dụng bất kỳ hình ảnh nào và hoạt ảnh không dựa vào JavaScript. Mặt trời, mặt trăng và đám mây đều được tạo bằng cách sử dụng CSS3's

  @keyframes sunrise {
      /* rule sets go here … */
  }

  98 và tập lệnh duy nhất trên trang dành cho các tab ở bên phải và cho nút cho phép người dùng bắt đầu và đặt lại hoạt ảnh

  Dưới đây là các trình duyệt hỗ trợ hoạt ảnh khung hình chính CSS3

  • Chrome 2 trở lên,
  • Safari4+,
  • Firefox 5+,
  • IE10 PP3,
  • iOSSafari 3. 2+,
  • Android2. 1+

  Mặc dù chưa có thông báo chính thức nào được đưa ra, nhưng dự kiến ​​sẽ có hỗ trợ trong Opera

  Nếu bạn mã hóa hoạt ảnh của mình bằng một cú pháp dựa trên nhà cung cấp duy nhất, bạn có thể sử dụng một công cụ như Prefixr hoặc Animation Fill Code để tự động điền mã bổ sung cho bạn

  Khung hình chính CSS hoạt động như thế nào?

  Quy tắc CSS @keyframes kiểm soát các bước trung gian trong chuỗi hoạt ảnh CSS bằng cách xác định kiểu cho khung hình chính (hoặc điểm tham chiếu) dọc theo chuỗi hoạt ảnh. This gives more control over the intermediate steps of the animation sequence than transitions.

  Mục đích chính của khung hình chính trong hoạt ảnh là gì?

  Khung hình chính là khung hình quan trọng chứa thông tin về điểm bắt đầu/điểm kết thúc của một hành động . Một khung hình chính cho bạn biết về hai điều; .

  Ví dụ khung hình chính là gì?

  Trong chỉnh sửa video kỹ thuật số phi tuyến tính, cũng như trong phần mềm tổng hợp video, khung chính là khung được sử dụng để biểu thị điểm bắt đầu hoặc kết thúc thay đổi được thực hiện đối với tham số. Ví dụ: khung chính có thể được đặt để chỉ ra điểm mà âm thanh sẽ tăng hoặc giảm dần ở một mức nhất định .

  Loại hoạt ảnh nào sử dụng khung hình chính?

  Hoạt hình 3D . tạo khung chính. Keyframing là hình thức đơn giản nhất để tạo hoạt ảnh cho một đối tượng. Dựa trên khái niệm rằng một đối tượng có trạng thái hoặc điều kiện ban đầu và sẽ thay đổi theo thời gian, về vị trí, hình dạng, màu sắc, độ sáng hoặc bất kỳ thuộc tính nào khác, đến một dạng cuối cùng khác.