CSS là một trong những cách mạnh mẽ nhất để làm cho trang web trở nên tương tác. Nó thay đổi giao diện của trang web. Một trong những tính năng quan trọng và thú vị mà CSS cung cấp là nó cho phép chúng ta thực hiện các hoạt ảnh. Nó cho phép chúng tôi di chuyển các phần tử trong trang của chúng tôi. Hãy bắt đầu Hành trình tạo ảnh động trong CSS của chúng ta theo thứ tự sau:
Hoạt ảnh trong CSS
Thêm hình ảnh động vào trang web của chúng tôi là một cách tuyệt vời để thu hút sự chú ý của người dùng. Nó không chỉ làm tăng giá trị cho trang của chúng tôi mà còn làm phong phú thêm trải nghiệm người dùng. Hoạt ảnh trong CSS được xây dựng dựa trên hai phần. họ đang
- Khung hình chính
- Hoạt hình
Các hoạt ảnh CSS được hỗ trợ trong tất cả các trình duyệt. Tuy nhiên, một số trình duyệt cũ hơn như Safari (phiên bản tối đa 8.0) yêu cầu tiền tố (-webkit-) để diễn giải các thuộc tính hoạt ảnh. Ví dụ:
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% -webkit-animation-name: cssanim / * old browser * / -webkit-animation-time: 5s / * old browser * / animation -name: cssanim animation-time: 5s} / * các trình duyệt cũ * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {left: 300px}}Chúng tôi có thể sử dụng trang html mẫu ở trên và thay thế mã CSS trong thẻ kiểu để thử các ví dụ khác.
Khung hình chính trong CSS
Đây là khối xây dựng hình ảnh động trong CSS. Nó được sử dụng để xác định các khoảnh khắc và phong cách cụ thể của hoạt ảnh trên trang web của chúng tôi. Nói cách khác, khi chúng ta chỉ định @keyframes bên trong CSS của mình, nó sẽ có quyền kiểm soát để sửa đổi trạng thái hiện tại thành trạng thái mới hoặc tạo hoạt ảnh cho các đối tượng trong một khoảng thời gian nhất định.
ví dụ về đối số dòng lệnh java
@Keyframe cần có các thuộc tính nhất định để kiểm soát hoạt ảnh như tên của hoạt ảnh, các giai đoạn và thuộc tính.
Tên - Cần có tên cho mọi hoạt ảnh để mô tả các hành vi của nó.
Các giai đoạn - Giai đoạn biểu thị sự hoàn thành của một hình ảnh động. Nó có thể được thực hiện được biểu thị bằng từ khóa “đến” và “từ” hoặc dưới dạng phần trăm, trong khi 0% biểu thị trạng thái bắt đầu và 100% biểu thị trạng thái kết thúc của hoạt ảnh. Lợi ích của việc sử dụng biểu diễn phần trăm là chúng ta có thể xác định nhiều giai đoạn trung gian ở giữa, tức là hành vi của hoạt ảnh ở giai đoạn 50% hoặc 75%, v.v.
Tính chất - Các thuộc tính này cho phép chúng tôi kiểm soát @keyframe để thao tác chúng trong hoạt ảnh.
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-time: 5s} @keyframes cssanim {0% {converter: scale (0.5) opacity: 0} 50 % {biến đổi: tỷ lệ (1.5) độ mờ: 1} 100% {biến đổi: tỷ lệ (1)}}Bây giờ chúng ta đã rõ về việc xác định khung hình chính. Hãy để chúng tôi khám phá các thuộc tính hoạt ảnh, để mô tả cách tạo hoạt ảnh cho các phần tử và đối tượng của chúng tôi. Hai thuộc tính tức là kế thừa và ban đầu có thể được sử dụng với tất cả các loại hoạt ảnh. Các thuộc tính này thường được sử dụng cùng với thẻ div để thể hiện các hành vi khác nhau.
ban đầu: Đặt thuộc tính này thành giá trị mặc định của nó.
thừa kế: Kế thừa thuộc tính này từ phần tử mẹ của nó.
Thuộc tính hoạt ảnh
- tên hoạt hình
Nó chỉ định tên của hoạt ảnh, được sử dụng trong @keyframes để thao tác.Các giá trị có thể là:
- Tên: Điều này chỉ định tên để liên kết với khung hình chính cho hoạt ảnh.
- không ai: Đây là giá trị mặc định và có thể được sử dụng để ghi đè các hoạt ảnh được kế thừa hoặc xếp tầng.
Cú pháp:
animation-name: tên | không có | ban đầu | thừa kế
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-time: 5s} @keyframes cssanim {0% {left: 0px} 100% {left: 300px} }- Thời lượng hoạt ảnh
Nó chỉ định thời gian cần để một hoạt ảnh hoàn thành một lần thực thi. Nó được xác định bằng giây hoặc mili giây (ví dụ: 4 giây hoặc 400 mili giây). Giá trị mặc định của thuộc tính này là 0s, vì vậy nếu thuộc tính này không được chỉ định thì hoạt ảnh sẽ không diễn ra.
Cú pháp:
thời lượng hoạt ảnh: thời gian
.anim {height: 200px width: 200px background: blue position: relative border-radius: 100% animation-name: cssanim animation-time: 4s} @keyframes cssanim {0% {converter: scale (0.4) opacity: 0} 50 % {biến đổi: tỷ lệ (1.4) độ mờ: 1} 100% {biến đổi: tỷ lệ (1)}}- hoạt cảnh chậm trễ
Thuộc tính animation-delay cho phép chúng ta chỉ định độ trễ trong hoạt ảnh. Nó xác định khi nào một chuỗi hoạt ảnh sẽ bắt đầu thực hiện.
Giá trị của thuộc tính này có thể được khai báo bằng giây (s) hoặc mili giây (mili giây). Nó có thể chứa cả giá trị tích cực và tiêu cực. Giá trị dương chỉ ra rằng hoạt ảnh sẽ bắt đầu sau khi thời gian được chỉ định trôi qua và cho đến lúc đó nó vẫn được nhất trí. Mặt khác, giá trị âm sẽ ngay lập tức bắt đầu hoạt ảnh từ điểm đó như thể nó đã được thực thi trong một khung thời gian cụ thể.
Cú pháp:
animation-delay: time
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-time: 4s animation-delay: 4s} @keyframes cssanim {0% {left: 0px} 100% {left: 250px}}- hoạt-động-lặp-đếm
Thuộc tính này cho biết số lần một chuỗi hoạt ảnh sẽ được phát. Giá trị mặc định của thuộc tính này là 1.Các giá trị có thể là:
- con số - biểu thị số lần lặp lại
- vô hạn - cho biết rằng hoạt ảnh sẽ lặp lại mãi mãi
Cú pháp:
animation-iteration-count: số | vô hạn
sự khác biệt giữa đầu bếp và ansible
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-time: 2s animation-iteration-count: 4} @keyframes cssanim {0% {left: 0px} 100% {còn lại: 100px}}- hướng hoạt hình
Nó xác định hướng của hoạt ảnh. Hướng của phần tử có thể được đặt để phát tiến, lùi hoặc theo các chu kỳ luân phiên.Giá trị mặc định của thuộc tính này là bình thường và nó được đặt lại vào mỗi chu kỳ.Các giá trị có thể là:
bình thường - Đây là hành vi mặc định và hoạt ảnh được phát về phía trước. Sau mỗi chu kỳ, hoạt ảnh về trạng thái ban đầu và được phát lại
đảo ngược - Hoạt ảnh được phát theo hướng ngược lại. Sau mỗi chu kỳ, hoạt ảnh về trạng thái kết thúc và được phát ngược lại
Luân phiên - Hướng của hoạt ảnh bị đảo ngược tức là nó phát về phía trước và sau đó quay ngược lại trên mỗi chu kỳ. Mọi chu kỳ lẻ hiển thị hoạt ảnh chuyển tiếp và mọi chu kỳ chẵn hiển thị chuyển động lùi.
thay thế-đảo ngược - Hướng của hình ảnh động được đảo ngược luân phiên. Ở đây hoạt ảnh được phát lùi trước và sau đó chuyển tiếp trên mọi chu kỳ. Mỗi chu kỳ lẻ di chuyển ngược lại hoặc lùi lại và mọi chu kỳ chẵn sẽ hiển thị hoạt ảnh chuyển tiếp.
Cú pháp:
hướng hoạt hình: bình thường | ngược lại |luân phiên | thay thế-đảo ngược
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-time: 2s animation-iteration-count :finity} @keyframes cssanim {0% {left: 0px} 100% {còn lại: 100px}}- hoạt hình-thời gian-chức năng
Thuộc tính này xác định đường cong tốc độ hoặc kiểu chuyển động của hoạt ảnh. Nó được chỉ định để thực hiện thay đổi kiểu hoạt hình một cách trơn tru từ dạng này sang dạng khác. Nếu không có giá trị nào được chỉ định, nó sẽ mặc định dễ dàng hơn.Các giá trị có thể có cho chức năng định thời gian hoạt ảnh là:
giảm bớt - Đây là giá trị mặc định của thuộc tính. Ở đây hoạt ảnh bắt đầu chậm, dần dần trở nên nhanh ở giữa và sau đó lại kết thúc chậm.
tuyến tính - Hoạt ảnh duy trì cùng một tốc độ trong suốt chu kỳ, tức là từ đầu đến cuối.
dễ dàng trong - Hoạt ảnh bắt đầu chậm.
thoải mái - Hoạt cảnh kết thúc chậm.
dễ vào - Hoạt ảnh di chuyển chậm cả khi bắt đầu và kết thúc.
khối-bezier (n, n, n, n) - Tính năng nâng cao này cho phép chúng tôi tạo một chức năng định thời gian tùy chỉnh bằng cách xác định các giá trị của riêng chúng tôi. Giá trị có thể có trong khoảng từ 0 đến 1.
Cú pháp:
animation-timing-function: tuyến tính | dễ dàng | dễ dàng ra ngoài | dễ dàng trong | dễ ra |khối-bezier (n, n, n, n)
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-time: 2s animation-direction: reverse} @keyframes cssanim {0% {background: orange left: 0px } 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}- chế độ hoạt hình
Đây là một thuộc tính đặc biệt vì nó xác định kiểu hoạt ảnh trước hoặc sau khi hoạt ảnh được phát.Theo mặc định, kiểu của phần tử không bị ảnh hưởng bởi hoạt ảnh trước khi bắt đầu hoặc sau khi nó kết thúc. Thuộc tính này hữu ích vì nó giúp ghi đè hành vi mặc định này của hoạt ảnh.Sau đây là các giá trị có thể có cho thuộc tính chế độ hoạt ảnh:
không ai - Đây là giá trị mặc định của thuộc tính, tức là các kiểu hoạt ảnh không được áp dụng cho phần tử, trước hoặc sau hoạt ảnh.
tiền đạo - Các kiểu được phần tử giữ lại trong chuỗi hoạt ảnh cuối cùng, tức là sau khi hoạt ảnh kết thúc.
ngược - Các kiểu được giữ lại bởi phần tử trong chuỗi hoạt ảnh ban đầu, tức là trước khi hoạt ảnh được nhìn chằm chằm đặc biệt trong thời gian trễ hoạt ảnh.
cả hai - Điều này có nghĩa là hoạt ảnh sẽ theo cả hai hướng tức là tiến và lùi
Cú pháp:
câu hỏi phỏng vấn c ++ stl
animation-fill-mode: none | tiền đạo | ngược lại | cả hai
.anim {width: 50px height: 50px background: lightblue color: white font-weight: bold position: relative animation-name: cssanim animation-time: 5s animation-iteration-count :finity border-radius: 100%} # anim1 { animation-timing-function: easy} # anim2 {animation-timing-function: linear} # anim3 {animation-timing-function: easy-in} # anim4 {animation-timing-function: easy-out} # anim5 {animation- timing-function: easy-in-out} @keyframes cssanim {từ {left: 0px} đến {left: 400px}}- hoạt hình-phát-trạng thái
Thuộc tính này chỉ định một hoạt ảnh ở trạng thái phát hoặc tạm dừng. Ngoài ra, khi hoạt ảnh được tiếp tục lại từ lúc tạm dừng, nó sẽ bắt đầu từ nơi nó đã rời đi.Các giá trị có thể là:
- đang chơi - Để hiển thị hoạt ảnh đang chạy
- tạm dừng - Để hiển thị hình ảnh động ở trạng thái tạm dừng.
Cú pháp:
animation-play-state: tạm dừng | đang chơi
.anim {width: 100px height: 100px background: lightblue position: relative animation-name: cssanim animation-length: 3s animation-delay: 2s animation-fill-mode: back border-radius: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- hoạt hình
Đây được gọi là thuộc tính tốc ký hoạt hình. Nó được sử dụng cho mã sạch hơn. Một khi chúng ta đã quen với tất cả các thuộc tính hoạt ảnh, chúng ta nên sử dụng tốc ký hoạt ảnh để mã hóa nhanh hơn và xác định tất cả các thuộc tính trong một dòng.
Cú pháp:
hoạt hình: [animation-name] | [thời lượng hoạt ảnh] | [animation-timing-function] |[animation-delay] | [hoạt-động-lặp-đếm] | [hướng hoạt hình] |[animation-fill-mode] | [animation-play-state]
Tất cả các hiệu ứng hoạt ảnh mà chúng tôi hiển thị ở trên bằng cách sử dụng các thuộc tính hoạt ảnh khác nhau có thể đạt được bằng cách sử dụng tốc kýhoạt hình bất động sản.
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-time: 2s animation-direction: normal animation-play-state: paused} @keyframes cssanim {0% {background: orange top: 0px} 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}Điều này kết thúc tất cả các thuộc tính hoạt ảnh có thể được sử dụng trong CSS. Chúng ta nên thử các biến thể khác nhau của các thuộc tính này để có một bức tranh rõ ràng hơn. Khi chúng ta cảm thấy thoải mái, thuộc tính tốc ký hoạt ảnh có thể giúp ích rất nhiều để viết mã nhanh hơn và sạch hơn. Đây là một trong những kỹ năng quan trọng cần học trong CSS cho các nhà phát triển web. Vì chúng ta có xu hướng tập trung nhiều hơn vào các đối tượng chuyển động hơn là các đối tượng tĩnh, hoạt ảnh có thể giúp chúng ta đạt được điều đó và cũng phát triển các trang web tuyệt vời đáng chú ý.
Kiểm tra của chúng tôi đi kèm với đào tạo trực tiếp do người hướng dẫn và trải nghiệm dự án thực tế. Khóa đào tạo này giúp bạn thành thạo các kỹ năng làm việc với công nghệ web back-end và front-end. Nó bao gồm đào tạo về Phát triển Web, jQuery, Angular, NodeJS, ExpressJS và MongoDB.
Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của blog “Ảnh động trong CSS” và chúng tôi sẽ liên hệ lại với bạn.