Cú pháp @starting-style trong CSS

định nghĩa và cách sử dụng

CSS @starting-style quy tắc này được sử dụng để xác định樣式 ban đầu của yếu tố trước khi yếu tố nhận được cập nhật樣式 đầu tiên.

đây có thể được sử dụng để tạo hiệu ứng chuyển đổi mượt mà vào và ra cho các yếu tố như hộp thoại, hộp mô hình hoặc bất kỳ yếu tố nào từ trạng thái display: none thành trạng thái hiển thị.

mô hình

ví dụ 1

sử dụng @starting-stylecho phép hộp bắt đầu với độ mờ 0 và rơi từ trên xuống:

.box {
  width: 150px;
  height: 150px;
  background-color: pink;
  opacity: 1;
  transition: all 0.9s ease;
  @starting-style {
    opacity: 0;
    translate: 0 -80px;
  }
}

thử nghiệm trực tiếp

ví dụ 2

sử dụng trong hộp thoại và hộp thoại @starting-style:

#myPopover {
  transition: opacity .5s ease-in, scale .5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}
#myDialog {
  transition: opacity .5s ease-in, scale .5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}

thử nghiệm trực tiếp

cú pháp CSS

@starting-style {
  ký tự định nghĩa css;
}

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hoàn toàn hỗ trợ quy tắc @ này.