Khung chính CSS

Tạo hoạt ảnh thật dễ dàng với CSS. Và phần thú vị là bạn không cần bất kỳ khung hoặc plugin nào của bên thứ ba.

Quy tắc CSS @keyframes là một công cụ mà chúng tôi cần có để tạo các hoạt ảnh này.

@keyframes Cú pháp

@Keyframes là một quy tắc CSS. At-rules cho biết CSS sẽ hoạt động như thế nào. Có nhiều quy tắc tại chỗ khác như @viewport, @supports trong số những quy tắc khác.

Chúng tôi xác định quy tắc @keyframes với cú pháp sau.

@keyframes <name> {
    from {
    /* start details here */
    }

    to {
    /* end details here */
    }
}

Chúng tôi có thể nhận được các khai báo hoạt ảnh tinh tế hơn bằng cách chỉ định tỷ lệ phần trăm thay vì từ khóa.

@keyframes <name> {
  0% { }
  50% { }
  100% { }
}

Lưu ý :Để sử dụng khung hình chính mới tạo của chúng tôi, chúng tôi cần thêm nó làm giá trị của animation-name bất động sản. Chúng tôi cũng có thể đặt animation-duration để chỉ định thời lượng của hoạt ảnh @keyframes đã khai báo của chúng tôi.

Ví dụ về Magic Ball

Hãy tiếp tục và làm cho một quả cầu ma thuật xuất hiện và biến mất. Vui lòng tham khảo Codepen đi kèm nếu bạn bị lạc bất cứ lúc nào.

Điều đầu tiên chúng ta cần làm là xác định hoạt ảnh của chúng ta. Chúng tôi sẽ đặt tên nó là quả cầu ma thuật:

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

@keyframes magic-ball {
  from {
    background-color: limegreen;
  }
  to {
    background-color: blueviolet;
  }
}

Về cơ bản, ở đây chúng ta đang thay đổi màu nền từ màu xanh lá chanh sang màu xanh lam. Điều này có thể được áp dụng cho bất kỳ phần tử nào, nhưng chúng tôi sẽ tiếp tục và áp dụng nó cho một vòng kết nối.

.circle {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  animation-name: magic-ball;
  animation-duration: 4s;
}

Đừng quên rằng để hoạt ảnh khung hình chính của chúng tôi hoạt động, chúng tôi cần thêm nó làm giá trị của animation-name thuộc tính và đặt thời lượng hoạt ảnh tính bằng giây bằng cách sử dụng animation-duration .

Với hoạt ảnh này, giờ quả bóng của chúng ta đang xuất hiện và biến mất! &# 128165;

Ví dụ về giảm giá chớp nhoáng

Hãy tiếp tục và tạo một hoạt ảnh khác. Lần này, chúng tôi sẽ tạo hoạt ảnh cho một hình vuông và tạo hiệu ứng chuyển động. Chúng tôi sẽ đặt tên cho hoạt ảnh của mình là moveIn và trong trường hợp này, chúng tôi sẽ sử dụng tỷ lệ phần trăm.

@keyframes moveIn {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

Độ mờ là khá nhiều trong suốt của chúng tôi. Vì vậy, chúng tôi có thể áp dụng hoạt ảnh mới tạo này cho hình vuông của chúng tôi

.square {
  width: 10rem;
  height: 10rem;
  background-color: greenyellow;
  animation-name: moveIn;
  animation-duration: 4s;
}

Bạn có thể thấy chúng tôi đã đạt được hiệu quả tốt như thế nào với rất ít thời gian!

Kết luận

Bạn có thể tiếp tục hành trình của mình về hoạt ảnh bằng cách đọc tài liệu CSS về hoạt ảnh. Cũng xin lưu ý, chúng tôi chỉ đề cập đến một cách để tinh chỉnh hoạt ảnh của chúng tôi bằng cách sử dụng thời lượng của nó. Có nhiều thuộc tính phụ hoạt ảnh đáng xem hơn!

Cuối cùng, hãy nhớ rằng không phải tất cả các thuộc tính đều có thể được làm động. Nhìn vào danh sách đầy đủ các thuộc tính động này.