Css animation css animation là gì

Mỗi keyframes sẽ được chạy ở một thời điểm xác định và trong keyframes đó nó quy định việc phần tử sẽ di chuyển ra sao.Ngoài ra, animation css còn gồm một số thuộc tính quy định các chi

H C VI N CÔNG NGH B U CHÍNH VIỄỄN THÔNG Ọ Ệ Ệ Ư

*****

NGHIỄN C U KHOA H C Ứ Ọ

LỜI GIỚI THIỆU

Animation là việc biến hình ảnh có thể chuyển động một cách chân thực

và sống động trên màn hình Nó cũng là một loại hình đa phương tiện, dùng để diễn hoạt và có trong các chương trình quảng cáo, các trò chơi điện tử, phim hoạt hình, hay nhiều thể loại khác hiện nay Chính vì được ứng dụng rộng rãi trong nhiều lĩnh vực, trong đó có website.

Việc ứng dụng animation trên website không còn xa lạ gì đối với chúng

ta nữa Tuy nhiên nếu trước đây việc đó phải thực hiện rất vất vả với những công cụ cồng kềnh, những thư viện được viết bằng javascript phức tạp và đôi khi điều ấy không tốt cho trang web của bạn Chính vì vậy mà việc tạo ra những animation bằng CSS đã được ra đời với những

cú pháp đơn giản, dễ viết và đã được các lập trình viên trên thế giới tin dùng Vậy cụ thể thì những cú pháp đó như thế nào, cách thức hoạt động

ra sao? Mọi thông tin sẽ được giải đáp bên dưới

Để tạo một chuyển động animation cho trang web với CSS, bạn cần phải có các keyframe Mỗi keyframes sẽ được chạy ở một thời điểm xác định và trong keyframes đó nó quy định việc phần tử sẽ di chuyển ra sao.

Ngoài ra, animation css còn gồm một số thuộc tính quy định các chi tiết khá quan trọng của hiệu ứng thường đi kèm như:

từ kiểu hiện tại sang kiểu mới tại một số thời điểm nhất định.

Cú pháp CSS :

@keyframes animation-name {keyframes-selector {css-styles;}}

● animation-name: tên của chuyển động, do chúng ta tự đặt tên Nếu chúng ta không điền hoặc điền sai tên mà mình đã tạo ra thì sẽ không có chuyển động animation Quy tắc đặt tên như sau:

1 Ký tự đầu tiên của tên keyframes không được là số (ví dụ là 12move nhưng nếu là move12 thì hợp lệ)

2 Tên không được là số

3 Được phép đặt tên viết hoa hay thường đều được

4 Được phép viết có dấu trong tên

5 Không được sử dụng các ký tự ngoại trừ “-” và “_”

6 Không được có khoảng cách trong tên

● keyframes-selector: tỉ lệ của thời gian hoạt động cấu hình Có 2 dạng keyframes-selector:

Sử dụng giá trị là các số từ 0-100%, định dạng cho sự di chuyển củaanimation theo phần trăm thời gian hành động diễn ra

VD: 0% , 100 % {top: 0px, bach-ground : red;}

70% : {top : 90px , back-gound : green;}

Sử dụng from to: thiết lập giá trị từ khởi đầu (from - tương đương với 0%) đến kết thúc (to - tương đương với 100%).( định dạng cho

sự chuyển động của thành phần theo vị trí đầu và cuối

VD: from {top 0px;}

to {top: 90px;}

Sự khác biệt khi giữa from/to và % là : Nếu trong 1 chu kì chuyển động ta chỉ có nhu cầu cho vật thể di chuyển theo 1 hướng nhất định thì dùng from/to Còn nếu như muốn vật thể của mình có thể di chuyển nhiều hướng khác nhau trong 1 chu kì thì ta dùng “ %”

● css-style: là những thuộc tính của css giúp chúng ta định dạng lại các phần tử được tạo bởi html Nó giúp ta tạo lại phong cách, bố cục cho trang web Thay đổi 1 số bố cục, màu sắc, font chữ Như vd trên thì css-style giúp

ta thay đổi bố cục (khoảng cách quả bóng) và màu sắc của nó

Lưu ý: trong 2 ví dụ dưới đây, chúng ta tuy đã keyframes nhưng hoàn toàn không

có gì xảy ra cả Đơn giản là vì chúng ta chưa áp những thuộc tính như tên gọi hoặc

là thời gian của animation Chúng ta hãy cùng đi tiếp những ví dụ phía sau để thấy được sự chuyển động

Cú pháp CSS:

animation-name: keyframe-name|none|initial|inherit;

● keyframe-name: chỉ định tên của animation mà mình muốn liên kết đến thẻ

● initial: giá trị mặc định (không có chuyển động) Thuộc tính này bằng với việc chúng ta không @keyframes vào cho nó Có 2 trường hợp xảy ra:Nếu phần tử đó không có thuộc tính animation hoặc không có phần tử cha thì sẽ không có gì xảy ra (không có animation), nó sẽ đứng im tại chỗ.Nếu phần tử cha của nó có thuộc tính animation thì nó sẽ được kế thừa giá trị các thuộc tính của phần tử cha

● inherit: kế thừa thuộc tính của phần tử cha gần nhất

● none: khi đặt giá trị của thuộc tính là none, trình duyệt sẽ sử dụng 1 trong 2 thuộc tính inherit hoặc initial tùy thuộc vào việc phần tử cha có thuộc tính animation hay không Nếu không nó sẽ sử dụng giá trị mặc định của trình duyệt initial và nếu có thì nó sẽ sử dụng inherit

Lưu ý: Khác với 2 ví dụ bên trên, ở ví dụ này chúng ta đã keyframes và sử dụng thuộc tính animation-name cho CSS Tuy nhiên như đã nói, chúng ta còn cần thêm

1 thuộc tính nữa đó là thời gian để chạy 1 chu kỳ animation

Cú pháp CSS:

animation-duration: time | initial | inherit;

● time: Chỉ định khoảng thời gian một hình ảnh động nên thực hiện để hoàn thành một chu kỳ Giá trị mặc định là 0s Nếu giá trị là 0s tức là hiệu ứng hoạtảnh xảy ra ngay lập tức Đơn vị là giây hoặc mili giây ( không có trường hợp giá trị âm) Chúng ta cũng có thể sử dụng giá trị thập phân như 0.3s ( hoặc viết ngắn gọn thành 3s

● initial: trả về giá trị mặc định tức ko chuyển động (trong trường hợp thẻ cha chứa nó không có thuộc tính animation hoặc không có thẻ cha) trường hợp có thẻ cha mà thẻ cha đầy đủ thuộc tính thì nó sẽ chạy theo thẻ cha

● inherit: kế thừa thuộc tính từ thẻ cha của nó

Lưu ý: Trong ví dụ dưới thì quả bóng số 1 là cha quả bóng số 2 và 3 Quả bóng số

2 lại là thẻ cha của quả bóng số 3

kỳ thực hiện chuyển động )

Cú pháp CSS:

animation-timing-function: linear | ease| ease-in | ease-out;

● ease: tạo hiệu ứng chuyển đổi khi bắt đầu thì chậm sau đó nhanh dần và gần kết thúc lại chậm dần (giá trị mặc định)

● linear: vật thay đổi với gia tốc bằng 0, tức là 1 sự thay đổi đều

● ease-in: animation bắt đầu chậm lúc bắt đầu và tăng tốc dần cho đến khi kết thúc

● ease-out: animation bắt đầu nhanh chóng và giảm tốc độ cho đến khi kết thúc

● ease-in-out: animation bắt đầu nhanh chóng và giảm tốc độ dần cho đến khi kết thúc

● step-start: Hoạt ảnh chuyển ngay lập tức đến trạng thái cuối cùng ( giống như trường hợp animation-duration bằng 0 hoặc không có animation-duration)

● step-end: Hoạt ảnh vẫn ở trạng thái ban đầu cho đến khi kết thúc và khi hết thời gian chuyển động của chu kì (animation-duration) thì nó lập tức chuyển

về trạng thái cuối cùng ( to | 100%)

● steps (số bước, start/end/none/both): Nếu không có tham số thứ 2 mặc định

là end Start khác end ở chỗ nó khi chạy nó sẽ được đứng trước end 1 bước.(VD như của ví dụ thì là khi vào chạy thì nó đã nhảy được 1 bước rồi )

● cubic-bezier (x1,y1,x2,y2): cho phép bạn xác định một giá trị của riêng mìnhtheo hàm bezier Dấu ngoặc đơn chứa 2 cặp , tổng cộng là 4 số chúng đại diệncho tọa độ x , y của 2 điểm trên đường cong Cả 2 giá trị x ,y phải nằm trong khoảng [0,1]

Ta biểu diễn một số thuộc tính trên thông qua cubic-bezier như sau : Ease = cubic-bezier(0.25,0.1,0.25,1.0)

Ease-in = cubic-bezier(0.42,0 ,1.0,1.0)

Ease-out = cubic-bezier(0,0,0.58,1.0)

Ease-in-out = cubic-bezier(0.42,0,0.58,1.0)

Linear = cubic-bezier(0.0,0.0,1.0,1.0)

● initial: trở về giá trị mặc định.(ease)

● inherit: kế thừa thuộc tính của thẻ cha chứa nó

( trong ví dụ vẫn sử dụng thuộc tính animation-fill-mode: forwards để khi kết thúc chu kì và đến vị trí cuối cùng thì nó sẽ ở tại vị trí đó chứ không về vị trí xuất phát Để chứng minh cho mọi người thấy là các thuộc tính chỉ khác nhau

về gia tốc ( sự nhanh chậm trên từng quãng đường chuyển động chứ ko làm ảnh hưởng đến thời lượng thực hiện animation)

Hỗ trợ Không hỗ trợ

Hỗ trợ 1 phần Hỗ trợ 1 phần khi dùng prefix

Hỗ trợ khi dùng prefixChỉ định số lần hoạt ảnh sẽ chạy ,sử dụng để thiết lập số lần thực hiện một animation

( Nếu không được viết vào mặc định thì animation-iteration-count = 1 ( thực hiện 1lần của chu kì )

Cú pháp CSS:

animation-iteration-count: number | infinite | initial | inherit;

● number: số lần thực hiện animation đó

● infinite: animation lặp lại liên tục và vô hạn

Hỗ trợ 1 phần Hỗ trợ 1 phần khi dùng prefix

Hỗ trợ khi dùng prefix

Là thuộc tính chỉ định độ trễ để bắt đầu một animation

Giá trị âm cũng được cho phép Nếu sử dụng giá trị âm là n, animation sẽ bắt đầu như thể nó đã được phát trong N giây/mili giây rồi

Hỗ trợ khi dùng prefixThuộc tính animation-direction sử dụng để xác định chiều chạy của animation

Hỗ trợ khi dùng prefixAnimation CSS không gây ảnh hưởng đến phần tử trước khi chạy keyframes đầu tiên và sau khi keyframes cuối cùng kết thúc Và thuộc tính animation-fill-mode sửdụng để thay đổi trạng thái của phần tử trước khi bắt đầu sau khi kết thúc.(không dùng cho trường hợp animation lặp vô tận)

Cú pháp CSS:

● none: khi animation không hoạt động thì nó sẽ giữ nguyên trạng thái bất độngcủa phần tử, không thêm một style nào vào thành phần (mặc định) Giông với việc không viết gì

● forwards: khi animation kết thúc và không hoạt động nữa, trạng thái của nó

sẽ là hoạt ảnh cuối cùng mà ta nhìn thấy(phụ thuộc vào animation-direction

và animation-iteration-count)

● backwards: khi animation không hoạt động trước khi bắt đầu animation (đang trong thời gian delay), giá trị này sẽ apply các thuộc tính của lần xuất hiện đầu tiên trong keyframes vào trạng thái của phần tử (phụ thuộc vào thuộctính animation-direction)

● both: kết hợp cả forwards và backwards cho trạng thái phần tử

Lưu ý: tất cả các quả bóng mặc định là màu đen , thời điểm bắt đầu có animation thì chúng có màu đỏ khi kết thúc chu kì chuyển động thì ở trạng thái cuối cùng chúng có màu đỏ

Hỗ trợ 1 phần Hỗ trợ 1 phần khi dùng prefix

Hỗ trợ khi dùng prefix

Chỉ định hình ảnh động tạm dừng hoặc tiếp tục chạy

Cú pháp CSS :

animation-play-state : paused | running | initial | inherit

● paused: tạm dừng chuyển động của animation khi nó đang thực thi

● running: giá trị mặc định , animation chuyển động bình thường

● initial: giá trị mặc định của nó (running)

● inherit: kế thừa thẻ cha

Tuy nhiên trong một vài trường hợp, việc khai đầy đủ như trên là không cần thiết

và dài dòng Vì vậy CSS hỗ trợ chúng ta một thuộc tính có thể khai báo toàn bộ giátrị của các thuộc tính trên, đó là thuộc tính animation

*( Không nhất thiết phải viết theo thứ tự , các vị trí có thể đảo lung tung cho nhau ,tuy nhiên ta nên viết theo như cú pháp dưới đây để cho người khác dễ dọc code cũng như hiểu code của mình 1 cách nhanh chóng 0)

Cú pháp CSS:

1 Cấu trúc animation cơ bản

● animation : [animation-name] [animation-duration]

2 Cấu trúc animation tổng quát

● animation : name] duration] timing-function] [animation-delay] [animation-interaction-count][animation-direction]

CSS TRANSITION

CSS TRANSITION LÀ GÌ?

Trong CSS thì transition được giao nhiệm vụ cung cấp cách giúp lập trình viên điều khiển tốc độ của hiệu ứng ngay khi thay đổi các thuộc tính có trong CSS Với CSS transitions thì muốn tạo ra animation ta cần phải có 1 số điều kiện để kích hoạt nó như sử dụng pseudo class,

Ngoài ra, Transition còn gồm một số thuộc tính quy định các chi tiết khá quan trọng của hiệu ứng thường đi kèm như:

Cú pháp CSS:

● none: khi đặt giá trị của thuộc tính là none, trình duyệt sẽ sử dụng 1 trong 2thuộc tính inherit hoặc initial tùy thuộc vào việc phần tử cha có thuộc tínhanimation hay không Nếu không nó sẽ sử dụng giá trị mặc định của trìnhduyệt initial và nếu có thì nó sẽ sử dụng inherit

● property: tên thuộc tính mà các bạn muốn thay đổi

● initial: đặt thuộc tính này thành giá trị mặc định

● inherit: kế thừa thuộc tính này từ thẻ cha của nó

có thể chỉ định trong một khoảng thời gian duy nhất khi cần áp dụng cho tất cả thuộc tính Hoặc, những giá trị sẽ cho phép các thuộc tính thực hiện chuyển đổi dần theo khoảng thời gian khác nhau

Cú pháp CSS:

transition-duration: time | initial | inherit;

● time: khoảng thời gian một hình ảnh động nên thực hiện để hoàn thành một chu kỳ Giá trị ban đầu là 0s Ở giá trị này thì hoạt động xảy xa ngay lập tức.Đơn vị là giây hoặc mili giây (luôn dương) Chúng ta có thể sử dụng số thập phân, ví dụ là 0.5s (viết tắt: 5s).

● initial: giá trị mặc định (không có chuyển động) - trong trường hợp thẻ cha chứa nó không có thuộc tính transition hoặc không có thẻ cha Nếu có thẻ cha

mà đồng thời thẻ cha có thuộc tính transition thì no sẽ chạy theo chính thẻ chacủa nó

● inherit: kế thừa thẻ cha (nếu ko có thẻ cha bao thì cũng như none và initial).VD: transition-duration

Cú pháp CSS:

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier( , , , )|initial|inherit;n n n n

● ease: là giá trị mặc định của transition-timing-function chỉ định hiệu ứng chuyển tiếp với bắt đầu chậm, sau đó nhanh, sau đó kết thúc chậm

● linear: Chỉ định một hiệu ứng chuyển tiếp với cùng tốc độ từ đầu đến cuối

● ease-in: Chỉ định một hiệu ứng chuyển tiếp với chậm lúc đầu và sau đó tăng dần tốc độ.

● ease-out: Chỉ định một hiệu ứng chuyển tiếp với nhanh lúc đầu và sau đó giảm dần tốc độ

● ease-in-out: Chỉ định hiệu ứng chuyển tiếp với bắt đầu và kết thúc chậm

● step-start:Hoạt ảnh chuyển ngay lập tức đến trạng thái cuối cùng ( giống nhưtrường hợp transition-duration bằng 0 hoặc không có transition-duration)

● step-end: Hoạt ảnh vẫn ở trạng thái ban đầu cho đến khi kết thúc và khi hết thời gian chuyển động của chu kì (transition-duration) thì nó lập tức chuyển

về trạng thái cuối cùng ( to | 100%)

● steps(int,start|end): Chỉ định một hàm bước, với hai tham số Tham số đầu tiên chỉ định số khoảng trong hàm Nó phải là một số nguyên dương (lớn hơn 0) Tham số thứ hai, là tùy chọn, là giá trị "bắt đầu" hoặc "kết thúc" và chỉ định thời điểm mà sự thay đổi giá trị xảy ra trong khoảng thời gian Nếu tham

số thứ hai bị bỏ qua, nó sẽ có giá trị "end"

● cubic-bezier (x1,y1,x2,y2): cho phép bạn xác định một giá trị của riêng mìnhtheo hàm bezier Dấu ngoặc đơn chứa 2 cặp , tổng cộng là 4 số chúng đại diệncho tọa độ x , y của 2 điểm trên đường cong Cả 2 giá trị x ,y phải nằm trong khoảng [0,1]

Ta biểu diễn một số thuộc tính trên thông qua cubic-bezier như sau : Ease = cubic-bezier(0.25,0.1,0.25,1.0)

Ease-in = cubic-bezier(0.42,0 ,1.0,1.0)

Ease-out = cubic-bezier(0,0,0.58,1.0)

Ease-in-out = cubic-bezier(0.42,0,0.58,1.0)

Linear = cubic-bezier(0.0,0.0,1.0,1.0)

● initial: Đặt thuộc tính này thành giá trị mặc định

● inherit: Kế thừa thuộc tính này từ phần tử mẹ của nó

VD: transition-timing-function

Cú pháp CSS:

transition: property duration timing-function delay|initial|inherit;

● property: chỉ định tên thuộc tính làm hiệu ứng

● duration: chỉ định bao nhiêu giây hoặc mili giây để hoàn thành hiệu ứng chuyển tiếp

● timing-function: chỉ định đường cong tốc độ của hiệu ứng chuyển tiếp

● delay: chỉ định thời gian khi nào sẽ bắt đầu hiệu ứng

● initial: Đặt thuộc tính này thành giá trị mặc định

● inherit: Kế thừa thuộc tính này từ phần tử mẹ của nó

Ban đầu:

div {

transition-name: example;transition-duration: 0.5s;transition-timing-function:ease;transition-delay: 2s;

CÁC WEBSITE THAM KHẢO

Bạn có thể bấm vào nút “PREVIEW - Open preview pane” để xem source code lẫngiao diện website Bấm vào Remix to Edit để sửa đoạn code trên mà không ảnh hưởng đến bản gốc.

3 W3SCHOOL

W3Schools là một trang web giáo dục cho việc học các công nghệ web trực tuyến Nội dung bao gồm các hướng dẫn và tài liệu tham khảo liên quan đến HTML,