Các hiệu ứng bạn có thể tạo bằng CSS Animation-direction

Khi bạn thay đổi hướng của hoạt ảnh CSS, những điều sau đây có thể xảy ra

• hiệu ứng vùng chọn
• Hoạt hình quay CSS
• CSS trượt trong hoạt hình
• Lật văn bản
• Hoạt hình văn bản mùa xuân

Chúng ta sẽ xem xét kỹ hơn từng hiệu ứng bên dưới

– Hiệu ứng Marquee

Hiệu ứng vùng lựa chọn cũng lâu đời như bản thân HTML. Trong HTML, nó là thẻ .

Theo mặc định, nó không tồn tại trong CSS gốc. Tuy nhiên,  bạn vẫn có thể tạo hiệu ứng vùng chọn bằng cách sau

• Hoạt ảnh của bạn có chức năng định thời gian hoạt ảnh được đặt thành vô hạn
• Hướng hoạt hình được đặt thành luân phiên

Đây là cách bạn có thể tự tạo hiệu ứng này

Marquee

.container {
chiều cao. 20px;
chiều cao dòng. 20px;
lề. 1em auto;
chiều rộng. 450px;
màu nền. #1a1a1a;
vị trí. tương đối;
tràn. ẩn;
}
. vùng chọn {
chiều rộng. 7em;
vị trí. tuyệt đối;
màu nền. đỏ;
màu. trắng;
căn chỉnh văn bản. trung tâm;
tên hoạt hình. marquee;
animation-duration. 3s;
chức-năng-thời-gian-hoạt-động. tuyến tính;
animation-iteration-count. vô hạn;
hướng hoạt hình. thay thế;
}
p {
lề. 0;
}
vùng chọn @keyframes {
từ {
trái. 100%;
}
đến {
trái. -7em;
}
}

– Hiệu ứng Marquee Sử dụng Hướng chuyển tiếp CSS

Bạn có thể đạt được điều gì đó tương tự bằng cách sử dụng hướng chuyển đổi CSS. Điều này có thể yêu cầu tương tác di chuột từ người dùng của bạn

Văn bản vùng chọn

.container {
chiều cao. 100px;
chiều rộng. 250px;
màu nền. #1560bd;
vị trí. tương đối;
tràn. ẩn;
}
. marquee-with-hover {
vị trí. tuyệt đối;
dưới cùng. 0;
trái. -270px;
chiều rộng. đệm 100%;
. 10px;
lề trái. 520px;
màu nền. #008;
màu. #ffffff;
chuyển tiếp. trái 300 mili giây tuyến tính, lề trái 300 mili giây;
}
. thùng đựng hàng. bay lượn. marquee-with-hover {
left. 0;
lề-trái. 0;
chuyển tiếp. còn lại 300 mili giây thoát ra;
}

– Hoạt hình quay CSS

Hoạt hình quay CSS có thể thực hiện được khi bạn tạo hiệu ứng chuyển đổi CSS được áp dụng cho phần tử HTML. Hướng quay phụ thuộc vào giá trị của animation-direction. Trong ví dụ mã hóa bên dưới, hướng hoạt hình được đặt thành luân phiên

body {
padding. 50px;
}
div {
chiều rộng. chiều cao 100px;
. 100px;
màu nền. #1560bd;
tên hoạt hình. spinIt;
animation-duration. 5000ms;
animation-iteration-count. vô hạn;
hàm-thời gian hoạt ảnh. tuyến tính;
hướng hoạt ảnh. thay thế;
}
@keyframes spinIt {
từ {
transform. xoay(0deg);
}
sang {
biến đổi. xoay(360 độ);
}
}

– Hoạt ảnh trượt vào

Slide-in animation sẽ di chuyển đối tượng hoạt hình từ trái sang phải và ngược lại

Điều này là có thể do những điều sau đây

• Một hướng hoạt hình thay thế
• Hoạt ảnh khung hình chính với các biến đổi CSS hoặc định vị CSS

Chạy ví dụ của chúng tôi dưới đây để xem hiệu ứng này được tạo ra như thế nào

HELLO WORLD

< . 70%;
header {
width: 70%;
ký quỹ. 2em auto;
tràn. ẩn;
}
. slidein {
animation-duration. 3s;
tên hoạt ảnh. slidein;
animation-iteration-count. 3;
hướng hoạt ảnh. thay thế;
}
@keyframes trượt vào {
từ {
lề trái. 100%;
chiều rộng. 300%
}
đến {
lề trái. 0%;
chiều rộng. 100%;
}
}

– Lật văn bản

Bạn có thể sử dụng hoạt hình lật văn bản khi cần sự chú ý của người dùng trên một phần cụ thể trên trang web của bạn. Một ví dụ điển hình là nút kêu gọi hành động (CTA) được sử dụng trong chiến dịch quảng cáo

Hơn nữa, hoạt hình có các thuộc tính sau

• Số lần lặp lại hoạt ảnh được đặt thành vô hạn
• Trong hoạt hình khung hình chính, chuyển đổi CSS thực hiện xoay văn bản
• Độ mờ của văn bản xen kẽ giữa “1” và “0”

Flip Text

body { . flex;
display: flex;
justify-content. center;
align-items. trung tâm;
chiều cao tối thiểu. 100vh;
}
h1 {
tên hoạt ảnh. flipText;
animation-duration. 1500ms;
độ trễ hoạt ảnh. 0s;
animation-timing-function. thả lỏng;
hướng hoạt ảnh. thay thế;
animation-iteration-count. vô hạn;
}
@keyframes flipText {
0% {
độ mờ. 1;
biến đổi. rotateX(0) translateY(0);
}
100% {
độ mờ. 0;
biến đổi. rotateX(90deg) translateY(-40px);
}
}

– Hoạt hình văn bản mùa xuân

Hành vi của hoạt hình này tương tự như lò xo. Logic như sau

• Đặt hướng hoạt hình thành luân phiên đảo ngược
• Thiết lập khung hình chính để thao tác khoảng cách chữ cái của văn bản bạn muốn

Nếu bạn làm điều này, bạn có thể nhận được một mã tương tự như thế này

Spring Text

* {
margin: 0;
đệm. 0;
kích thước hộp. hộp viền;
}
. vùng chứa {
hiển thị. flex;
justify-content. center;
align-items. trung tâm;
phần đệm. 2em;
}
. văn bản mùa xuân {
color. #639;
tên hoạt hình. springText;
animation-duration. 1s;
chức năng thời gian hoạt hình. dễ dàng;
độ trễ hoạt hình. 0s;
animation-iteration-count. 5;
hướng hoạt ảnh. thay thế-đảo ngược;
chế độ lấp đầy hoạt ảnh. ngược lại;
}
@keyframes springText {
0% {
khoảng cách giữa các chữ cái. 1. 2em;
màu. #d8bfd8;
}
100% {
giãn cách chữ cái. 0. 1em;
màu. #483db8;
}
}

Hỗ trợ trình duyệt web cho CSS Animation-direction

Tại thời điểm viết bài này, tất cả các trình duyệt web hiện đại đều hỗ trợ CSS animation-direction

Sự kết luận

Trong bài viết này, bạn đã học cách thay đổi hướng hoạt ảnh CSS của mình. Tuy nhiên, đây là bản tóm tắt những gì bạn đã học được cho đến nay

• Hoạt động bên trong của CSS animation-direction
• Các giá trị được CSS animation-direction chấp nhận, đó là giá trị bình thường, đảo ngược, thay thế, đảo ngược thay thế, ban đầu và kế thừa
• Tạo hướng hoạt hình luôn di chuyển bằng cách sử dụng hướng hoạt hình vô hạn
• Các hiệu ứng bạn có thể tạo bằng hướng hoạt ảnh CSS, như hiệu ứng vùng chọn, hoạt ảnh trượt vào và các hiệu ứng khác

CSS animation-direction là công cụ bắt buộc phải có trong kho CSS của bạn. Nếu bạn muốn thay đổi hướng hoạt ảnh CSS của mình, hãy sử dụng thuộc tính này cùng với mọi thứ bạn đã học được trong hướng dẫn của chúng tôi

5/5 - (14 phiếu bầu)

• Tác giả
• Bài viết gần đây

Vị trí là tất cả

Vị trí là tất cả. Tài nguyên Go-To của bạn để Tìm hiểu & Xây dựng. CSS, JavaScript, HTML, PHP, C++ và MYSQL

hoạt hình là gì

Thuộc tính hướng hoạt ảnh xác định xem hoạt ảnh sẽ được phát tiến, lùi hay theo chu kỳ luân phiên .

Hoạt hình mặc định là gì

hướng hoạt hình mặc định. thông thường; . Khi đến cuối, nó sẽ bắt đầu lại ở khung hình chính đầu tiên

Hoạt hình có nghĩa là gì trong CSS?

Hoạt hình CSS là gì? . Bạn có thể thay đổi bao nhiêu thuộc tính CSS tùy thích, bao nhiêu lần tùy thích. Để sử dụng hoạt ảnh CSS, trước tiên bạn phải chỉ định một số khung hình chính cho hoạt ảnh. Các khung hình chính giữ các kiểu mà phần tử sẽ có vào những thời điểm nhất định. lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times as you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.

Sự khác biệt giữa hoạt ảnh và chuyển tiếp trong CSS là gì?

Chuyển tiếp tạo hoạt ảnh cho đối tượng từ điểm này sang điểm khác . Hoạt ảnh cho phép bạn xác định Khung hình chính thay đổi từ trạng thái này sang trạng thái khác với các thuộc tính và khung thời gian khác nhau. Sử dụng quá trình chuyển đổi để thao tác giá trị bằng JavaScript. Tính linh hoạt được cung cấp bằng cách có nhiều khung hình chính và vòng lặp dễ dàng.

Đọc tiếp