Chuyển đổi css: tất cả

chức năng thời gian khác nhau

Ngoài các chức năng định thời được tích hợp sẵn, bạn cũng có thể chỉ định chức năng của riêng mình. Ceaser CSS Easing Tool tuyệt vời giúp việc này trở nên rất dễ dàng

Điều đáng chú ý là các đường cong bạn tạo ra có thể có giá trị âm trong đó. Đường cong bezier cho hộp cuối cùng ở trên là ________ 58 _______, các giá trị âm đang khiến nó 'tăng tốc', trông khá tuyệt

Sự chậm trễ

Cú pháp cho quá trình chuyển đổi CSS3 có dạng

transition:  [  ||
                ||
                ||
                ]

Bạn sẽ nhận thấy tham số cuối cùng là độ trễ - điều này cho phép bạn kích hoạt mọi thứ sau khi một sự kiện xảy ra. Dưới đây là một bản demo nhỏ hiển thị chức năng này

độ trễ chuyển tiếp

Điều này hoạt động bằng cách chỉ cần thêm độ trễ cho từng vòng kết nối khác nhau. Điều này dễ dàng như thêm một transition-delay: 0.6s; vào phần tử

Độ trễ nâng cao

Bạn có thể đặt cách các thuộc tính khác nhau tạo hiệu ứng khác nhau. Trong ví dụ này, vòng tròn bình thường (màu xanh) có CSS ​​này (với tiền tố nhà cung cấp phù hợp)

#dd_main2 {
  transition: all 1s ease-in-out;
}

Thay vào đó, vòng tròn 'Ví dụ 1' (màu xanh lục) có CSS ​​này

Trong khi vòng tròn 'Ví dụ 2' (màu đỏ) có CSS ​​này thay thế

#dd_main2 {
  transition-property: top, left, border-radius, background-color;
  transition-duration: 2s, 1s, 0.5s, 0.5s;
  transition-delay: 0s, 0.5s, 1s, 1.5s;
}

Điều này cho phép chúng tôi tạo hoạt ảnh cho các thuộc tính độc lập với nhau, nghĩa là kỹ thuật đơn giản này có thể được sử dụng để tạo hoạt ảnh rất phức tạp

thuộc tính hoạt hình

Về các thuộc tính bạn có thể tạo hiệu ứng động, cách tốt nhất là thử nghiệm. W3C duy trì một danh sách các thuộc tính có thể được làm động trên. Chúng bao gồm mọi thứ từ màu nền và khoảng cách chữ cái đến bóng văn bản và chiều cao tối thiểu. Nhiều thuộc tính trong số này không được hoạt hình jQuery hỗ trợ theo mặc định, làm cho các chuyển đổi CSS trở nên hữu ích hơn nhiều. Ngoài ra, nhiều phần cứng của trình duyệt tăng tốc hoạt ảnh không yêu cầu vẽ lại, cụ thể là độ mờ, biến đổi 3D và bộ lọc. Để xem các phương thức mà Webkit tăng tốc, hãy xem AnimationBase. mã cpp từ nguồn Webkit. Tại thời điểm viết bài, có ba lớp được định nghĩa ở đây. PropertyWrapperAcceleratedOpacity,

transition:  [  ||
                ||
                ||
                ]

transition:  [  ||
                ||
                ||
                ]

Trên thực tế, các trình duyệt đang cho phép nhiều thuộc tính hơn những thuộc tính này được hoạt ảnh -

transition:  [  ||
                ||
                ||
                ]

transition:  [  ||
                ||
                ||
                ]

transition:  [  ||
                ||
                ||
                ]

transition:  [  ||
                ||
                ||
                ]

transition:  [  ||
                ||
                ||
                ]

transition:  [  ||
                ||
                ||
                ]

transition:  [  ||
                ||
                ||
                ]

transition:  [  ||
                ||
                ||
                ]

#dd_main2 {
  transition: all 1s ease-in-out;
}

#dd_main2 {
  transition: all 1s ease-in-out;
}

#dd_main2 {
  transition: all 1s ease-in-out;
}

#dd_main2 {
  transition: all 1s ease-in-out;
}

#dd_main2 {
  transition: all 1s ease-in-out;
}

#dd_main2 {
  transition: all 1s ease-in-out;
}

#dd_main2 {
  transition: all 1s ease-in-out;
}

#dd_main2 {
  transition: all 1s ease-in-out;
}

#dd_main2 {
  transition: all 1s ease-in-out;
}

#dd_main2 {
  transition: all 1s ease-in-out;
}

#dd_main2 {
  transition-property: top, left;
  transition-duration: 1s, 1s;
  transition-delay: 0s, 1s;
}

#dd_main2 {
  transition-property: top, left;
  transition-duration: 1s, 1s;
  transition-delay: 0s, 1s;
}

#dd_main2 {
  transition-property: top, left;
  transition-duration: 1s, 1s;
  transition-delay: 0s, 1s;
}

#dd_main2 {
  transition-property: top, left;
  transition-duration: 1s, 1s;
  transition-delay: 0s, 1s;
}

#dd_main2 {
  transition-property: top, left;
  transition-duration: 1s, 1s;
  transition-delay: 0s, 1s;
}

#dd_main2 {
  transition-property: top, left;
  transition-duration: 1s, 1s;
  transition-delay: 0s, 1s;
}

#dd_main2 {
  transition-property: top, left;
  transition-duration: 1s, 1s;
  transition-delay: 0s, 1s;
}

#dd_main2 {
  transition-property: top, left;
  transition-duration: 1s, 1s;
  transition-delay: 0s, 1s;
}

#dd_main2 {
  transition-property: top, left;
  transition-duration: 1s, 1s;
  transition-delay: 0s, 1s;
}

#dd_main2 {
  transition-property: top, left;
  transition-duration: 1s, 1s;
  transition-delay: 0s, 1s;
}

#dd_main2 {
  transition-property: top, left, border-radius, background-color;
  transition-duration: 2s, 1s, 0.5s, 0.5s;
  transition-delay: 0s, 0.5s, 1s, 1.5s;
}

#dd_main2 {
  transition-property: top, left, border-radius, background-color;
  transition-duration: 2s, 1s, 0.5s, 0.5s;
  transition-delay: 0s, 0.5s, 1s, 1.5s;
}

#dd_main2 {
  transition-property: top, left, border-radius, background-color;
  transition-duration: 2s, 1s, 0.5s, 0.5s;
  transition-delay: 0s, 0.5s, 1s, 1.5s;
}

#dd_main2 {
  transition-property: top, left, border-radius, background-color;
  transition-duration: 2s, 1s, 0.5s, 0.5s;
  transition-delay: 0s, 0.5s, 1s, 1.5s;
}

#dd_main2 {
  transition-property: top, left, border-radius, background-color;
  transition-duration: 2s, 1s, 0.5s, 0.5s;
  transition-delay: 0s, 0.5s, 1s, 1.5s;
}

#dd_main2 {
  transition-property: top, left, border-radius, background-color;
  transition-duration: 2s, 1s, 0.5s, 0.5s;
  transition-delay: 0s, 0.5s, 1s, 1.5s;
}

#dd_main2 {
  transition-property: top, left, border-radius, background-color;
  transition-duration: 2s, 1s, 0.5s, 0.5s;
  transition-delay: 0s, 0.5s, 1s, 1.5s;
}

#dd_main2 {
  transition-property: top, left, border-radius, background-color;
  transition-duration: 2s, 1s, 0.5s, 0.5s;
  transition-delay: 0s, 0.5s, 1s, 1.5s;
}

#dd_main2 {
  transition-property: top, left, border-radius, background-color;
  transition-duration: 2s, 1s, 0.5s, 0.5s;
  transition-delay: 0s, 0.5s, 1s, 1.5s;
}

#dd_main2 {
  transition-property: top, left, border-radius, background-color;
  transition-duration: 2s, 1s, 0.5s, 0.5s;
  transition-delay: 0s, 0.5s, 1s, 1.5s;
}