Chuyển tới nội dung
Home » Keyframe Css Là Gì | Các Cách Ứng Dụng Keyframe Để Tạo Hiệu Ứng

Keyframe Css Là Gì | Các Cách Ứng Dụng Keyframe Để Tạo Hiệu Ứng

Animation cơ bản dành cho người mới phần 1

Thuộc tính Keyframe CSS là gì?

Keyframes là yếu tố cấu thành nên hiệu ứng trong CSS hay còn gọi là CSS animations. Nó định nghĩa hiệu ứng sẽ thay đổi và có kiểu dáng như thế nào tại mỗi thời điểm trong thời gian của hiệu ứng. Mỗi một Keyframes CSS sẽ có các thành phần sau đây:

Tên của hiệu ứng Keyframe

Là tên do bạn đặt cho hiệu ứng đó. Một ví dụ là bạn có thể đặt tên cho hiệu ứng là Pacman.

Các mốc thời gian của hiệu ứng Keyframe

Các mốc thời gian của hiệu ứng sẽ được hiển thị bằng giá trị phần trăm (%). 0% chính là thời điểm bắt đầu hiệu ứng, và 100% là thời điểm kết thúc hiệu ứng. Bạn có thể thay đổi các giá trị này để điều chỉnh thời gian xuất hiện của các hiệu ứng trên website.

Thuộc tính CSS

Thuộc tính CSS là thuộc tính với giá trị mà bạn muốn thay đổi tương ứng với các mốc thời gian trên. Như vậy một thuộc tính Keyframe CSS sẽ bao gồm cả 3 yếu tố trên, nếu thiếu một trong ba yếu tố sẽ không thể tạo nên một hiệu ứng hoàn chỉnh được phải không.Giờ đây hãy cùng xem một ví dụ về cách thức hoạt động của thuộc tính này nhé.

Các thuộc tính con của animation

Các thuộc tính con của animation gồm có:

animation-name: pacman;

Tên của hiệu ứng (định nghĩa @keyframes)

animation-duration: 3s;

Tổng thời gian diễn ra 1 lần hiệu ứng là

animation-timing-function: linear;

Cách để chạy hiệu ứng (giống như transition-timing-function): có thể xác định được đường cong tốc độ (hay còn gọi là đồ thị tốc độ chuyển động) hoặc tốc độ của hiệu ứng animation. Các giá trị cho thuộc tính animation gồm có: ease, linear, ease-in, ease-out, ease-in-out, initial, inherit, và default value là ease: bắt đầu chuyển động chậm, rồi nhanh hơn, rồi sau đó lại chậm hơn.

Animation cơ bản dành cho người mới phần 1
Animation cơ bản dành cho người mới phần 1

Animation và @keyframes


Animation



@keyframes

là một bộ thuộc tính đi chung với nhau dùng để tạo hiệu ứng chuyển động, 2 thuộc tính này được kỳ vọng giảm tải lượng lớn source code Javascript.

Phần lớn trang web gần đây sử dụng

animation



@keyframes

khá nhiều để tạo hiệu ứng thêm cho trang web, đặc biệt những trang Landing page.

Cấu trúc

Cần phải có đầy đủ cả 2 thuộc tính

animation



@keyframes

.

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

tag { animation: [animation-name] [duration]; } @keyframes animation-name { }

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

tag { animation: [animation-name] [duration] [timing] [delay] [interaction-count] [direction]; } @keyframes animation-name { }


@keyframes

có 2 cấu trúc như sau (tùy vào mục đích sử dụng):

@keyframes animation-name { from { } to { } }

@keyframes animation-name { 0% { } 10% { } 40% { } … 100% { } }

Các giá trị của

animation

:

Giá trị Đơn vị VD Mô tả
animation-name Tên bất kỳ, không khoảng cách. boxAnimation Xác định tên cho một animation, bắt buộc trùng với tên khai báo tại
duration Thời gian 5s Thời gian để hoàn thành một chuyển động, mặc định là 0s.
timing linear

ease

ease-in

ease-out

ease-in-out

cubic-bezier(n,n,n,n)

ease Xác định loại hiệu ứng chuyển động.
delay Thời gian 2s Cho biết sau bao lâu thì chuyển động sẽ bắt đầu, mặc định sẽ là 0.
interaction-count Số tự nhiên

infinite

Số lần thực hiện chuyển động, mặc định 1 lần.

Giá trị infinite là lập vô hạn.

direction normal

alternate

alternate Cho biết chuyển động có đảo ngược ở chu kỳ tiếp theo hay không, mặc định là normal.

Cách sử dụng

HTML viết:


Animation


CSS viết – khi chưa sử dụng animation:

p { background-color: #476CFF; text-align: center; width: 100px; }

Hiển thị trình duyệt:

Animation

Tạo một vài chuyển động đơn giản, để các bạn hình dung được rõ về

animation

:

CSS viết:

p { background-color: #476CFF; text-align: center; width: 100px; animation: moveRight 5s infinite; } @keyframes moveRight { from { width: 100px; } to { width: 300px; } }

Hiển thị trình duyệt:

Animation

Ví dụ trên, ta cho thuộc tính animation có 3 giá trị:

  • [animation-name]: tên này cần phải trùng với @keyframes.
  • [duration]: một chu kỳ chuyển động trong 5s.
  • [interaction-count]: cho chuyển động lặp vô hạn.

Ví dụ thêm về animation và @keyframes


Animation


Animation lặp lại và đổi chiều

p { background-color: #476CFF; text-align: center; width: 100px; animation: moveRight 5s infinite alternate; } @keyframes moveRight { from { width: 100px; } to { width: 300px; } }

Animation

Animation theo vị trí

p { background-color: #476CFF; text-align: center; width: 100px; position: relative; animation: moveRight 5s infinite alternate; } @keyframes moveRight { from { left: 0; } to { left: 100px; } }

Animation

Animation với transform

p { background-color: #476CFF; text-align: center; width: 100px; position: relative; animation: moveRight 5s infinite alternate; } @keyframes moveRight { from { left: 0; transform: rotate(0deg); } to { left: 200px; transform: rotate(360deg); } }

Animation

Animation kết hợp nhiều giá trị

p { background-color: #476CFF; text-align: center; width: 100px; position: relative; animation: moveRight 5s infinite alternate; } @keyframes moveRight { from { background-color: #73BEFF; height: 30px; line-height: 30px; left: 0; } to { background-color: #FFFF00; height: 100px; line-height: 100px; left: 200px; } }

Animation

Animation và @keyframes theo phần trăm

p { background-color: #476CFF; text-align: center; width: 100px; position: relative; animation: moveRight 5s infinite alternate; } @keyframes moveRight { 0% { background-color: #73BEFF; left: 0; top: 0; } 30% { background-color: #FFFF00; left: 150px; top: 40px; transform: rotate(0deg); } 60% { background-color: #FF0000; left: 300px; top: 0; transform: rotate(-180deg); } 100% { background-color: #BC70FF; left: 400px; top: 60px; transform: rotate(180deg); } }

Animation

Ngoài các ví dụ trên,

animation

còn có nhiều thuộc tính riêng cho từng giá trị, các bạn có thể xem thêm tại tham khảo animation.

Keyframe là gì – là thuật ngữ quen thuộc và gần gũi với những ai sử dụng phần mềm After Effects. Nó là một thuật ngữ quan trọng trong việc sản xuất Video.Vậy Keyframe là gì và vai trò cụ thể của nó như thế nào? Bạn đọc hãy cùng FPT Arena tìm hiểu kỹ hơn về vấn đề này nhé.

Thành thạo Keyframe – làm chủ mọi phần mềm chỉnh sửa video

Có thể thấy, quá trình để tạo dựng nên những thước phim đẹp mắt, hấp dẫn đòi hỏi nhiều kỹ thuật từ người làm ra chúng. Nếu bạn có hứng thú với công việc sản xuất video, mong muốn tìm hiểu chuyên sâu hơn với phần mềm After Effects nói chung và Keyframe Animation nói riêng, khóa học 3D Animation tại VTC Academy Plus sẽ là lựa chọn hoàn hảo.

Với cơ sở vật chất tiên tiến chuẩn quốc tế và nội dung đào tạo không ngừng cập nhật, VTC Academy Plus hứa hẹn mang đến trải nghiệm học tập sát với thực tiễn nhu cầu doanh nghiệp trong ngành, luôn hỗ trợ học viên trong việc học tập và thực hành các dự án thực tế. Ngoài ra, tại đây, học viên sẽ có cơ hội được liên thông du học tại Viện Thiết kế Quốc tế RUBIKA (Pháp).

RUBIKA được đánh giá là trường đào tạo 3D Animation đứng thứ hai trên thế giới (theo chuyên trang Animation Career Review) với phương pháp giảng dạy chú trọng vào thực hành và sự kết hợp tư duy thẩm mỹ cùng với kỹ năng sử dụng thành thạo các công cụ cần thiết.

Như vậy, hy vọng bài viết trên có thể giúp bạn hình dung rõ hơn về Keyframe là gì, cách sử dụng và phân loại Keyframe trong phần mềm After Effects. Liên hệ ngay với VTC Academy Plus nếu bạn có bất kỳ thắc mắc nào về ngành 3D Animation hoặc phương thức nhập học.

Keyframe là gì? Tầm quan trọng của Keyframe trong sản xuất Video

Thuật ngữ Keyframe là một thuật ngữ quen thuộc trong sản xuất video. Hãy cùng colorME tìm hiểu Keyframe là gì và tầm quan trọng của Keyframe trong quá trình edit video nha.

CSS Animation cho người mới bắt đầu
CSS Animation cho người mới bắt đầu

Một ví dụ về thuộc tính Keyframe CSS

Sau đây là một ví dụ về cách sử dụng thuộc tính Keyframe CSS:

@keyframes pacman { 0 % { bottom: 0; left: 340 px; } 33 % { bottom: 340 px; left: 340 px; } 66 % { bottom: 340 px; left: 40 px; } 100 % { bottom: 0; left: 40 px; } }

Trên đây là ví dụ về keyframes pacman. Bao gồm có 2 điểm thay đổi trạng thái, là khi con pacman chuyển động. Trong cấu trúc trên, keyframes có tổng cộng 4 điểm. Tùy vào thời điểm, số lần muốn thay đổi trạng thái mà các bạn sẽ tạo ra được số keyframes tương ứng với thời điểm mong muốn. Pacman sẽ thay đổi từ từ trạng thái keyframe trước tới trạng thái của keyframe sau.Ở ví dụ trên bạn có thể thấy pacman đã di chuyển từ vị trí ban đầu là 0% cho đến 33%.Keyframe CSS xác định quá trình thay đổi tại các thời điểm mong muốn của một hiệu ứng. Giữa các thời điểm mong muốn, đối tượng sẽ thay đổi trạng thái từ thời điểm trước đến thời điểm sau. Nếu hiệu ứng của bạn có 2 điểm dừng là 0% và 100% thì bạn có thể viết cấu trúc như sau:

@keyframes pacman { from { //something here } to { // something else } }

Một số điều bạn cần lưu ý trước khi sử dụng Keyframe trong After Effect

Chuẩn bị hình ảnh

Điều quan trọng khi chuẩn bị hình ảnh là phải ghi nhớ các yêu cầu của hệ thống Keyframe. Hình ảnh phải có chất lượng cao và độ rộng lẫn chiều cao đều phải đạt tối thiểu 2000px. Bạn có thể sử dụng công cụ xóa nền nếu bạn muốn cải thiện hình ảnh của mình trước với nền tùy chỉnh.

Chuẩn bị clips

Để sử dụng Keyframe, trước tiên bạn cần chuẩn bị clip của mình bằng cách đánh dấu các điểm. Các điểm này xác định thời gian vào và ra của hoạt ảnh và giúp bạn theo dõi các Keyframe. Khi bạn hoàn tất việc thiết lập Keyframe, bạn đã sẵn sàng bắt đầu tạo hoạt ảnh cho clips của mình.

KEYFRAME là gì? Cách dùng KEYFRAME
KEYFRAME là gì? Cách dùng KEYFRAME

Keyframe là gì?

Có thể hiểu keyframe là một điểm chốt (hay còn gọi là chìa khoá “key”) trên timeline đánh dấu sự bắt đầu hoặc kết thúc của quá trình chuyển đổi các thông số như Position (vị trí), Opacity (độ trong suốt), Scale (phóng to/ thu nhỏ), Rotation (quay), Color (màu sắc),… ở một thời điểm nhất định. Việc thay đổi các thông số này qua thời gian giúp tạo nên chuyển động cho video.

(ảnh: Thaohy.blogspot.com)

Trong phần timeline của các phần mềm dựng video cho phép các bạn chèn keyframe để tạo ra chuyển động cho video. Bạn phải tạo ít nhất 2 keyframe và đưa thông tin về vị trí và thời gian chuyển động bắt đầu và kết thúc. Khi 2 keyframe có giá trị thông số khác nhau, phần mềm sẽ tự tính toán để đưa thông số ở giữa 2 điểm chốt chuyển dần từ giá trị điểm đầu đến giá trị điểm cuối.

Kết luận

Trên đây là bài viết giới thiệu đến bạn đọc về những thông tin cơ bản liên quan đến thuộc tính keyframe css. Chúng tôi đã phân tích đến bạn đọc 3 đối tượng bắt buộc khi sử dụng thuộc tính này. Chỉ có một số trình duyệt với yêu cầu cao mới có thể sử dụng thuộc tính trên nên bạn cần lưu ý về trình duyệt sử dụng nhé. Bạn cũng cần lưu ý về cách sử dụng thêm các hiệu ứng animation. Bởi vì thuộc tính keyframe css không thể hoạt động nếu không kết hợp được với các animation.Chúng tôi hy vọng những thông tin trên đây đã đem đến cho bạn đọc kiến thức hữu ích về thuộc tính keyframe css, các hiệu ứng animation. Hy vọng bạn đọc có thể sử dụng thành thạo thuộc tính và hiệu ứng này trong công việc của mình. Cảm ơn bạn đã quan tâm theo dõi.Nếu có bất kỳ thắc mắc hay câu hỏi nào cần được giải đáp hãy liên hệ với chúng tôi để được hỗ trợ nhanh nhất.

Học CSS Animation trong 15 phút
Học CSS Animation trong 15 phút

Tầm quan trọng của keyframe trong sản xuất video

Keyframe là thành phần quan trọng trong sản xuất video. Trong edit video cơ bản, keyframe giúp sửa các lỗi như góc máy bị nghiêng, khung hình quá to khiến chủ thể bé, tạo các chuyển động mượt mà cho video,…

Ngoài ra, keyframe giúp bạn điều chỉnh các thông số của layer như Position – bạn có thể dịch chuyển Layer từ vị trí này sang vị trí khác trong một khoảng thời gian nhất định. Hay Opacity – có thể để vật thể từ 100% tức là nhìn thấy hoàn toàn thành 0% tức là không còn vật thể nữa. Bạn cũng có thể thêm keyframe vào các hiệu ứng để chúng trở nên sinh động và bắt mắt.

Keyframe là thuật ngữ quen thuộc trong các công cụ biên tập và sản xuất video như Premiere hay After Effects. Đặc biệt, trong các phần mềm làm Motion Graphics như After Effects, các keyframe được chèn vào trong phần timeline để tạo ra các chuyển động.

Tầm quan trọng của keyframe trong sản xuất video

Keyframe là thành phần quan trọng trong sản xuất video. Trong edit video cơ bản, keyframe giúp sửa các lỗi như góc máy bị nghiêng, khung hình quá to khiến chủ thể bé, tạo các chuyển động mượt mà cho video,…

Ngoài ra, keyframe giúp bạn điều chỉnh các thông số của layer như Position – bạn có thể dịch chuyển Layer từ vị trí này sang vị trí khác trong một khoảng thời gian nhất định. Hay Opacity – có thể để vật thể từ 100% tức là nhìn thấy hoàn toàn thành 0% tức là không còn vật thể nữa. Bạn cũng có thể thêm keyframe vào các hiệu ứng để chúng trở nên sinh động và bắt mắt.

Keyframe là thuật ngữ quen thuộc trong các công cụ biên tập và sản xuất video như Premiere hay After Effects. Đặc biệt, trong các phần mềm làm Motion Graphics như After Effects, các keyframe được chèn vào trong phần timeline để tạo ra các chuyển động.

Áp dụng animation keyframe CSS và chữa bài tập hiệu ứng
Áp dụng animation keyframe CSS và chữa bài tập hiệu ứng

Các loại keyframe được sử dụng trong After Effects

Linear Keyframes – Keyframe chuyển động thẳng

Đây là loại keyframe thông dụng nhất trong After Effects. Linear Keyframes được bắt đầu tự động khi bạn thay đổi thông số thuộc tính nào đó và xuất hiện dưới dạng hình thoi hoặc kim cương. Tuy nhiên, nhược điểm của loại keyframe này là chuyển động khá cứng nhắc và đột ngột nên thường không được sử dụng thường xuyên trong Motion Graphics.

Auto Bezier – Keyframe tự động chuyển động cong

Loại keyframe này là hệ quả của Linear Keyframes ở trên nhưng sẽ tạo độ mượt các điểm thay đổi ở giữa 2 keyframe khác. Khi đó, chuyển động từ thẳng sẽ chuyển sang dạng cong, khiến cho chuyển động của bạn mượt hơn rất nhiều. Auto Bezier được xuất hiện dưới dạng hình tròn và nó sẽ làm thay đổi hướng chuyển động của Keyframe.

Để chuyển từ Linear Keyframes sang Auto Bezier, bạn chỉ cần nhấn giữ phím Ctrl và click vào điểm keyframe ở phần preview của AE.

Continuous Bezier – Keyframe thủ công chuyển động cong

Trong khi auto bezier tự động làm mượt chuyển động và thay đổi hướng của chuyển động, thì Continous Bezier sẽ giúp bạn có thể tùy chỉnh thù công nó dựa trên điều bạn mong muốn.

Để làm được điều này, bạn cần chọn tất cả Keyframe bạn muốn chuyển đổi, rồi ấn tổ hợp phím Ctrl + Shift + K. Một hộp thoại sẽ mở ra để giúp bạn tùy chỉnh chuyển động của bạn.

Bezier Keyframe – Keyframe cong

Là keyframe được tạo ra khi người dùng kiểm soát toàn bộ thông số của Keyframe dựa vào chuyển động của chúng và dựa vào thông số của chúng trên Graph Editor. Việc tạo ra Bezier Keyframe không thay đổi hình dạng của Keyframe, nó chỉ đơn giản là thay đổi đường chuyển động của vật thể.

Hold Keyframe – Keyframe dừng

Hold Keyframe dùng để khóa một hiệu ứng hoặc thông số ở đúng vị trí đó. Nó tạo cảm giác như chúng ta đang làm phim stop motion.

Các cách ứng dụng Keyframe để tạo hiệu ứng

Thu phóng chậm (Slow Zoom)

Đây là một trong những Keyframe Animation được các Video Editors sử dụng rất nhiều, kể cả chuyên nghiệp lẫn nghiệp dư bởi nó rất đơn giản để tạo. Trước tiên, hãy chọn một vị trí trên timeline video nơi bạn muốn thu phóng bắt đầu. Đặt Keyframe tại đó và chia tỷ lệ. Sau đó, di chuyển về phía trước ngay trên timeline và đặt Keyframe thứ hai nơi bạn muốn thu phóng kết thúc. Tiếp tục điều chỉnh tỷ lệ và di chuyển hình ảnh kết quả trong khung để có được ảnh cắt mong muốn.

Thu phóng nhanh (Fast Zoom)

Fast Zoom được thực hiện tương tự như Slow Zoom, tuy nhiên các Keyframe sẽ gần nhau hơn trên timeline, từ nửa giây đến một giây. Tiến hành đặt Keyframe, chọn độ phóng đại và sau đó thử phát video để xem kết quả phù hợp với mong muốn của bạn hay chưa.

Thay đổi vị trí của clip

Chọn clip bạn muốn thay đổi vị trí trên timeline và sau đó nhấp vào biểu tượng Keyframe. Một đường màu xanh lam mờ sẽ xuất hiện, sau đó bạn có thể di chuyển clip đến vị trí mong muốn hoặc thực hiện thay đổi với các thuộc tính khác.

Chuyển tiếp (Transition) và bộ lọc (Filters)

Có hai loại Transition Keyframe phổ biến là cắt và hòa tan. Trong đó, cắt là kiểu chuyển tiếp cơ bản nhất với việc sử dụng một clip khác để thay thế cho clip trước đó và hòa tan là một quá trình chuyển đổi dần dần, clip đầu tiên dần biến mất trong khi clip thứ hai dần xuất hiện.

Slow Motion

Bằng cách thiết lập Keyframe, bạn có thể tạo chuyển động chậm mượt mà, nhất quán hoặc tăng tốc độ video của mình để tạo hiệu ứng nhịp độ nhanh thú vị. Ở giữa các Keyframe, phần mềm chỉnh sửa video của bạn sẽ tự động nội suy để tạo chuyển động mượt mà, chân thực.

98.1 Học Animation CSS từ Cơ Bản đến Nâng Cao - Hướng dẫn Sử dụng CSS Keyframes
98.1 Học Animation CSS từ Cơ Bản đến Nâng Cao – Hướng dẫn Sử dụng CSS Keyframes

Các loại keyframe được sử dụng trong After Effects

Linear Keyframes – Keyframe chuyển động thẳng

Đây là loại keyframe thông dụng nhất trong After Effects. Linear Keyframes được bắt đầu tự động khi bạn thay đổi thông số thuộc tính nào đó và xuất hiện dưới dạng hình thoi hoặc kim cương. Tuy nhiên, nhược điểm của loại keyframe này là chuyển động khá cứng nhắc và đột ngột nên thường không được sử dụng thường xuyên trong Motion Graphics.

Auto Bezier – Keyframe tự động chuyển động cong

Loại keyframe này là hệ quả của Linear Keyframes ở trên nhưng sẽ tạo độ mượt các điểm thay đổi ở giữa 2 keyframe khác. Khi đó, chuyển động từ thẳng sẽ chuyển sang dạng cong, khiến cho chuyển động của bạn mượt hơn rất nhiều. Auto Bezier được xuất hiện dưới dạng hình tròn và nó sẽ làm thay đổi hướng chuyển động của Keyframe.

Để chuyển từ Linear Keyframes sang Auto Bezier, bạn chỉ cần nhấn giữ phím Ctrl và click vào điểm keyframe ở phần preview của AE.

Continuous Bezier – Keyframe thủ công chuyển động cong

Trong khi auto bezier tự động làm mượt chuyển động và thay đổi hướng của chuyển động, thì Continous Bezier sẽ giúp bạn có thể tùy chỉnh thù công nó dựa trên điều bạn mong muốn.

Để làm được điều này, bạn cần chọn tất cả Keyframe bạn muốn chuyển đổi, rồi ấn tổ hợp phím Ctrl + Shift + K. Một hộp thoại sẽ mở ra để giúp bạn tùy chỉnh chuyển động của bạn.

Bezier Keyframe – Keyframe cong

Là keyframe được tạo ra khi người dùng kiểm soát toàn bộ thông số của Keyframe dựa vào chuyển động của chúng và dựa vào thông số của chúng trên Graph Editor. Việc tạo ra Bezier Keyframe không thay đổi hình dạng của Keyframe, nó chỉ đơn giản là thay đổi đường chuyển động của vật thể.

Hold Keyframe – Keyframe dừng

Hold Keyframe dùng để khóa một hiệu ứng hoặc thông số ở đúng vị trí đó. Nó tạo cảm giác như chúng ta đang làm phim stop motion.

Giới thiệu

Sau khi đã tạo keyframes cho hành động, giờ cần thêm hành động đó vào cho đối tượng cần thực hiện thông qua thuộc tính

animation

.

Thuộc tính animation có 2 nhiệm vụ:

  • Gán hành động được định nghĩa ở @keyframes cho đối tượng mà bạn muốn thực hiện hành động

  • Định nghĩa cách diễn ra hành động

    Để chạy được hiệu ứng, sẽ cần ít nhất 2 thuộc tính animation:


  • animation-name

    : tên hiệu ứng (được định nghĩa keyframes)

  • animation-duration

    : tổng thời gian diễn ra hiệu ứng, đơn vị giây (s) hoặc mili giây (ms)

Ví dụ như hình pacman ở trên:


img { animation-name: pacman; animation-duration: 3s; }

Bạn cũng có thể dùng short syntax:


img { animation: pacman 3s; }

Hiểu và làm chủ Keyframe trong Adobe Premiere | QuạHD
Hiểu và làm chủ Keyframe trong Adobe Premiere | QuạHD

Vai trò của Keyframe là gì trong sản xuất video?

Như các bạn đã biết, keyframe có vai trò quan trọng trong sản xuất video. Trong biên tập video cơ bản, nó có thể giúp sửa các lỗi cơ bản. Như: góc máy bị nghiêng, chủ thể béo trong khi khung hình đó,… Cùng tìm hiểu về vai trò của Keyframe là gì trong sản xuất video ngay sau đây.

Điều chỉnh thông số của layer

Vai trò của keyframe mà bạn nhất định phải biết khi sử dụng phần mềm After Effects. Đó là giúp điều chỉnh các thông số của layer, cụ thể:

  • Position – Vị trí: Bạn có thể di chuyển Layer từ vị trí này sang vị trí khác trong một khoảng thời gian cho cố định.
  • Opacity – Độ trong suốt: Tức là bạn có thể điều chỉnh độ trong suốt từ 0% đến 100%.
  • Hoặc bạn cũng có thể thêm Keyframe để cho các đối tượng trở nên sinh động và bắt mắt.

Tạo chuyển động

Keyframe là thuật ngữ thân quen với các designer trong thiết kế và sản xuất video. Trong các phần mềm làm Motion Graphic. Các keyframe được chèn vào timeline để tạo các chuyển động sinh động cho đối tượng.

Bạn hãy ứng dụng keyframe linh động trong việc thiết kế và sản xuất video của mình.

Khóa học cơ bản và chuyên sâu về thiết kế video tại FPT Arena

Nếu bạn vẫn còn thắc mắc keyframe là gì. Bạn có thể tìm hiểu thêm khóa học về thiết kế đồ họa cơ bản và chuyên nghiệp. Một trong các địa chỉ uy tín giúp bạn thỏa sức sáng tạo video chuyên nghiệp là FPT Arena.

FPT Arena là đơn vị đầu tiên đào tạo mỹ thuật đa phương tiện tại Việt Nam. Đây cũng là đơn vị đầu tiên triển khai chương trình hợp tác giữa Việt Nam và Ấn Độ. Bài giảng và quy trình giảng dạy có lộ trình học tập bài bản, chuyên nghiệp. Do đó, sau khi tham gia khóa học, bạn sẽ hiểu toàn bộ về các công cụ thiết kế, sản xuất video. Trong đó có khái niệm về thuật ngữ Keyframe là gì?

Hi vọng qua các thông tin chia sẻ trong bài viết trên. FPT Arena hi vọng bạn đọc có thêm nhiều kiến thức bổ ích về keyframe và đồ họa máy tính. Bạn có thể tìm hiểu thông tin về kiến thức khác thông qua https://arena.fpt.edu.vn.

Định nghĩa và sử dụng

Thuộc tính @keyframes dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation.

Cấu trúc

@keyframes tênAnimation { giá trị { css } } @-moz-keyframes tênAnimation { giá trị { css } } @-webkit-keyframes tênAnimation { giá trị { css } }

Trong đó:

  • @-moz-keyframes hỗ trợ cho firefox.
  • @-webkit-keyframes hỗ trợ cho Google Chrome và Safari.

@keyframes có các giá trị như sau:

Thuộc tính giá trị Ví dụ Mô tả
@keyframes Tên animation @keyframes aniName{} Xác định tên cho @keyframes.
from {thuộc tính: giá trị;}

to {thuộc tính: giá trị;}

from {top: 0;}

to {bottom: 100px; color: red;}

Định dạng thành phần theo trí đầu và vị trí cuối.
Phần trăm {thuộc tính: giá trị;} 0% {top: 0;}

50% {top: 150px;}

100% {top: 50px;}

Định dạng thành phần theo phần trăm thời gian hành động diễn ra.

Ví dụ

HTML viết:


HỌC WEB CHUẨN


Hiển thị trình duyệt khi chưa có CSS:

HỌC WEB CHUẨN

CSS viết:

p { position: relative; width: 130px; animation: aniName 10s infinite; -moz-animation: aniName 10s infinite; -webkit-animation: aniName 10s infinite; -o-animation: aniName 10s infinite; } @keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } } @-moz-keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } } @-webkit-keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } } @-o-keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } }

Hiển thị trình duyệt khi có CSS:

HỌC WEB CHUẨN

Trình duyệt và hệ điều hành hỗ trợ

Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho @keyframes:

Trình duyệt PC Smartphone – Tablets
@keyframes 10 4

-moz-

12

-o-

19

-webkit-

5.1

-webkit-

3.2

-webkit-

2.1

-webkit-

Hiểu biết thêm về Animation trong CSS3

Bài đăng này đã không được cập nhật trong 6 năm

CSS animation là công nghệ được giới thiệu trong phiên bản CSS3. Nó cho phép chúng ta tạo hiệu ứng chuyển động mà không phải sử dụng Javascript hay Flash. Trong bài học này bạn sẽ tìm hiểu cách tạo chuyển động thẳng và quay vòng đồng thời cho một thẻ div nhờ sử dụng HTML5 và CSS3.

Một số thuộc tính

@keyframes: dùng để thiết lập một chuyển động.

Cú Pháp @keyframes Name { /code/ }

Trong đó

  • Name: là tên của chuyển động.
  • Code: là các đoạn code cho tiến trình chuyển động.

animation-name tác dụng xác định thành phần sẽ thực thi animation nào.

Cú Pháp


animation-name: name;

Trong đó : Name chính là tên của thuộc tính @keyframes


.element { width: 50px; height: 50px; background-color: #009966; position: relative; margin: 0 auto; animation-name: bounce; animation-duration: 2s, 2s; animation-iteration-count: infinite, infinite; } @-webkit-keyframes bounce { from { top: 150px; animation-timing-function: ease-out; } 25% { top: 50px; animation-timing-function: ease-in; } 50% { top: 200px; animation-timing-function: ease-out; } 75% { top: 75px; animation-timing-function: ease-in; } to { top: 150px; } }

animation-duration :thiết lập khoảng thời gian thực thị 1 chuyển động animation

Cú Pháp


animation-duration:

Trong đó: time là có thể tính bằng s hoặc ms.


.element { width: 50px; height: 50px; left: 0; background-color: #009966; position: relative; transform-origin: left center; } .container:hover .element { animation-name: wobble; } .element-1 { background-color: #009966; animation-duration: 2s; } @keyframes wobble { 0% { left: 0px; } 10% { left: 50px; } 20% { left: 25px; } 30% { left: 100px; } 40% { left: 50px; } 50% { left: 200px; } 60% { left: 100px; } 70% { left: 250px; } 80% { left: 200px; } 90% { left: 300px; } 100% { left: 0px; } }

animation-timing-function : xác định tốc độ chuyển động của một animation sẽ như thế nào.

Cú Pháp:


animation-timing-function: value;

animation-delay : xác định độ trễ của mỗi lượt chuyển động.

Cú Pháp


animation-delay: value;

animation-iteration-count: thiết lập số lần thực hiện một animation.

Cú Pháp


animation-iteration-count: value;

7.animation-direction : xác định xem chiều chạy của animation sẽ như thế nào.

Cú Pháp


aniamtion-direction: value;

Cú Pháp


animation-fill-mode: value;

animation-play-state: xác định trạng thái của animation.


animation-platy-state: value;

Trong thiết kế giao diện website hiện đại Animation rất hữu ích và được sử dụng rộng rãi . Mong rằng bài viết có thể giúp được các bạn hiểu về Animation trong qua trình tìm hiểu. Xin cảm ơn đã đọc bài viết .

All rights reserved

Keyframe là gì? Các loại Keyframe trong After Effects

Nếu bạn mới gia nhập “thế giới” Video Editor hay có yêu thích với việc chỉnh sửa video, chắc hẳn bạn đã từng nghe qua Keyframe và tự hỏi: “Keyframe là gì?”. Mọi phần mềm hoặc ứng dụng chỉnh sửa video chuyên nghiệp đều có Keyframe. Đó là một công cụ cần thiết, phổ biến cho bất kỳ công việc chỉnh sửa video nào bao gồm chuyển động, hoạt ảnh hoặc chuyển tiếp.

CSS @keyframes Animation
CSS @keyframes Animation

Tìm hiểu về ý nghĩa của Keyframe

Giải thích đơn giản, dễ hiểu nhất như sau: Trong phần mềm After Effects, Keyframe là một thuật ngữ chỉ điểm chốt, một chìa khóa tại một thời điểm nhất định. Nơi mà người dùng đưa ra thông tin cho phần mềm After Effects. Bạn có thể thay đổi các giá trị Layer, thay đổi hiệu ứng vị trí hay độ trong suốt (Opacity),… Thông qua cách thay đổi này, bạn đã tạo ra các chuyển động như mong muốn cho các đối tượng.

Trong phần mềm After Effects luôn chứa các Keyframe trong timeline. Khi bạn muốn tạo chuyển động cho đối tượng, bắt buộc bạn phải có điểm đầu và điểm cuối. Thực chất keyframe chỉ góp phần vào hoạt động tạo nên chuyển động.

Keyframe là gì, nó còn có thể gọi là keyframe training. Nó là điểm bắt đầu cho mọi chuyển động của vật thể trong đồ họa máy tính. Muốn tạo được chuyển động, bạn cần sử dụng keyframe để lưu vị trí và thời điểm đầu tiên. Sau đó phần mềm đồ họa sẽ tạo chuyển động bằng cách nối điểm đầu và điểm cuối lại với nhau.

Giới thiệu về animation

Sau khi bạn đã tạo được keyframes cho hành động, bạn cần thêm vào hành động đó các thuộc tính animation. Thuộc tính animation sẽ có hai nhiệm vụ chính:

  1. Gán hành động được định nghĩa ở @keyframes cho đối tượng muốn thực hiện hành động.
  2. Định nghĩa cách diễn ra hành động.

Để chạy được hiệu ứng một cách mượt mà, cần phải có ít nhất 2 thuộc tính animation như sau:

  • animation-name: tên của hiệu ứng (được định nghĩa @keyframes)
  • animation-duration: là tổng thời gian diễn ra hiệu ứng, đơn vị là giây (s) hoặc mili giây (ms)

Ví dụ như hình pacman ở trên sẽ có cấu trúc như sau:

img { animation – name: pacman; animation – duration: 3 s; }

Bạn cũng có thể dùng short syntax theo cấu trúc:

img { animation: pacman 3 s; }

Keyframe Animation | Cách làm hiệu ứng chuyển động, thay đổi trong CapCut PC | LUCKY
Keyframe Animation | Cách làm hiệu ứng chuyển động, thay đổi trong CapCut PC | LUCKY

Tập tành tìm hiểu CSS animation – Bài 3: Keyframes & Animation

Bài đăng này đã không được cập nhật trong 4 năm

Bài viết lần này sẽ giới thiệu tiếp tới thuộc tính Animation. Với thuộc tính

animation

, để tạo hiệu ứng không thể không nhắc tới

@keyframes

– cánh tay đắc lực.

@Keyframes

Keyframes là yếu tố cấu thành nên CSS animations. Nó định nghĩa hiệu ứng sẽ trông ra sao tại mỗi thời điểm trong dải thời gian của hiệu ứng. Mỗi keyframes sẽ có:

  • Tên của hiệu ứng: Tên bạn đặt cho hiệu ứng đó, vd như:

    pacman

    chẳng hạn
  • Các mốc thời gian của hiệu ứng: mỗi dấu mốc được biểu thị bằng giá trị %: 0% là thời điểm bắt đầu hiệu ứng, và 100% là lúc kết thúc hiệu ứng. Bạn hoàn toàn có thể thêm nhiều mốc vào giữa 2 mốc 0% – 100% này.
  • Thuộc tính CSS: thuộc tính css với giá trị mà bạn muốn thay đổi tại các mốc thời gian ở trên

Giờ xem thử 1 keyframes đơn giản, VD như cái

pacman

hồi nãy nhé: mình muốn con pacman của mình chạy lên trên 1 đoạn, sau đó rẽ trái đi thêm 1 đoạn, rồi lại rẽ trái đi thêm 1 đoạn nữa:


@keyframes pacman { 0% { bottom: 0; left: 340px; } 33% { bottom: 340px; left: 340px; } 66% { bottom: 340px; left: 40px; } 100% { bottom: 0; left: 40px; } }

Như trên là mình đã định nghĩa ra 2 điểm giữa thay đổi trạng thái (là khi con pacman rẽ), nên keyframe của mình có tổng cộng 4 điểm. Như vậy, tùy vào thời điểm, số lần muốn thay đổi trạng thái như nào mà các bạn sẽ tạo ra số keyframe tương ứng với thời điểm mong muốn, và pacman thay đổi dần dần từ trạng thái của keyframe trước tới trạng thái của keyframe tiếp theo, như là di chuyển từ vị trí ban đầu tới vị trí 33%. Bạn có thể xem ví dụ pacman của mình tại đây nhé:

Keyframes xác định quá trình thay đổi tại các thời điểm mong muốn của hiệu ứng. Giữa các thời điểm, đối tượng sẽ thay đổi trạng thái dần dần từ thời điểm trước tới thời điểm sau.

Ngoài ra nếu hiệu ứng của bạn chỉ có 2 điểm dừng: 0% và 100%, thì có thể viết thành from … to như sau:


@keyframes pacman { from { //something here } to { // something else } }

Animation

Các loại Keyframe trong After Effects

After Effects là phần mềm dùng để chỉnh sửa video khá phổ biến hiện nay. Có đến 5 loại Keyframe khác nhau trong After Effects, và mỗi loại đều đi kèm với biểu tượng (icon) đặc trưng riêng.

Linear Keyframe (Keyframe chuyển động thẳng)

Đây là dạng cơ bản nhất trong After Effects và nó sử dụng tốc độ thay đổi đồng đều thẳng giữa hai Keyframe, được biểu thị mặc định bằng biểu tượng kim cương. Nhược điểm của loại Keyframe này là hoạt động một cách bất ngờ và cứng nhắc. Do đó, hầu hết các nhà làm phim hoạt hình chuyên nghiệp và Motion Designer sẽ không sử dụng chúng thường xuyên.

Auto Bezier (Keyframe tự động chuyển độ cong)

Auto Bezier lấy Linear Keyframe làm tiền đề và làm mượt tỷ lệ thay đổi giữa hai Keyframe bằng cách tạo đường cong cho chúng. Điều này cho phép các phần tử di chuyển linh hoạt hơn và không bị cứng nhắc. Auto Bezier xuất hiện dưới dạng hình tròn và tự động thay đổi các chốt điều hướng để làm mượt chuyển động. Để chuyển Linear Keyframe thành Auto Bezier, chỉ cần giữ phím Ctrl (hoặc Cmd trên Macbook), sau đó nhấp vào Keyframe ở phần preview của After Effects và lặp lại lần nữa nếu bạn muốn hoàn tác.

Continuous Bezier (Keyframe thủ công chuyển động cong)

Trong khi Auto Bezier tự động làm mượt chuyển động thì Continuous Bezier lại liên tục làm như vậy theo cách thủ công. Để thực hiện, bạn cần đánh dấu các Keyframe mà bạn muốn thay đổi, sau đó nhấn vào phím Ctrl (hoặc Cmd với Macbook) + Shift + K trên bàn phím. Tiếp theo, một hộp thông tin xuất hiện cho phép bạn điều chỉnh nội suy theo cách thủ công.

Continuous Bezier được biểu thị bằng hình đồng hồ cát. Bạn sẽ nhìn thấy chúng khi thêm hiệu ứng hoặc thêm Keyframe Assistant như Easy Ease bằng cách nhấp chuột phải vào một trong các Keyframe có trên timeline, chuyển đến Keyframe Assistant -> Easy Ease.

Bezier Keyframe – Keyframe cong

Bezier là nơi bạn có toàn quyền kiểm soát các thông số và chức năng với đường chuyển động (Graph Motion) hoặc biểu đồ giá trị (Value Graph). Để có thể tùy ý điều chỉnh, bạn cần truy cập vào Graph Editor. Việc tạo ra Bezier Keyframe không làm thay đổi hình dạng Keyframe mà chỉ đơn giản là thay đổi đường chuyển động của vật thể.

Xem thêm: Motion Graphic là gì?

Phân biệt đường cong của Auto Bezier, Continous Bezier và Bezier

Hold Keyframe – Keyframe dừng

Hold Keyframe dùng để khóa một hiệu ứng hoặc một thông số ở cố định một vị trí nào đó. Điều này được ứng dụng vào các cảnh đóng băng, tạo cảm giác như chúng ta đang làm phim stop motion.

Loại Keyframe này được biểu thị bằng hình vuông, bạn có thể áp dụng chúng bằng cách chọn Layer của bạn, sau đó đi tới Layer -> Time -> Freeze Frame.

Capcut PC | Sử dụng mask, keyframe, motion tracking
Capcut PC | Sử dụng mask, keyframe, motion tracking

Tạm kết

Hi vọng bài viết này đã giúp bạn hiểu thêm phần nào về keyframe và có thể sử dụng chúng một cách hiệu quả trong quá trình chỉnh sửa video. Bộ đôi biên tập và sản xuất video Premiere và After Effects chắc chắn sẽ là trợ thủ đắc lực giúp bạn sáng tạo thật nhiều video ấn tượng. Đừng quên tham khảo ngay KHOÁ HỌC PREMIERE CƠ BẢN và KHOÁ HỌC AFTER EFFECTS CƠ BẢN tại ColorME nhé!

Thu Trang

Tầm quan trọng của Keyframe trong sản xuất video

Keyframe là mắt xích quan trọng trong mọi quá trình sản xuất video, xuất hiện trong toàn bộ tính năng của After Effects.

Đối với chỉnh sửa video cơ bản: Keyframe được sử dụng để tạo ra các hiệu ứng đặc biệt và kiểm soát các thay đổi trong video. Với các keyframes, bạn có thể tạo ra những thứ như chuyển động chậm, đảo ngược … theo ý muốn.

Đối với chỉnh sửa video nâng cao: Keyframe không chỉ có vai trò đưa các Layer (lớp) từ vị trí này sang vị trí khác trong Composition mà còn được sử dụng với nhiều tính năng khác. Ngoài ra, Keyframe hỗ trợ điều chỉnh thông số của layer (lớp) trong After Effect như:

  • Vị trí (Position): Thay đổi vị trí video từ nơi này sang nơi khác trong một khoảng thời gian nhất định.
  • Độ trong suốt (Opacity): Thay đổi độ trong suốt của video từ 0% đến 100%. Chẳng hạn, nếu bạn muốn một đoạn phim từ màu đen sang màu trắng hoặc trong suốt, bạn nên thêm một Keyframe ở đầu video và đặt Transparency về 0%.
  • Chèn Keyframe vào hiệu ứng: Tính năng này hỗ trợ bạn linh hoạt sáng tạo các sản phẩm để trở nên sinh động, cuốn hút hơn.

Đối với phim hoạt hình: Bạn nên tạo nhiều Keyframe cho video, tối thiểu hai Keyframe để tạo khung và điểm khởi đầu liên tục cho phim hoạt hình của bạn. Điều này giúp cho người xem cảm thấy hứng thú, tạo cảm giác kích thích và tránh sự nhàm chán khi xem phim.

Học \
Học \”xong\” CSS trong 1 clip, code được cái web siêu đẹp

Một số điều bạn cần lưu ý trước khi sử dụng Keyframe trong After Effect

Chuẩn bị hình ảnh

Điều quan trọng khi chuẩn bị hình ảnh là phải ghi nhớ các yêu cầu của hệ thống Keyframe. Hình ảnh phải có chất lượng cao và độ rộng lẫn chiều cao đều phải đạt tối thiểu 2000px. Bạn có thể sử dụng công cụ xóa nền nếu bạn muốn cải thiện hình ảnh của mình trước với nền tùy chỉnh.

Chuẩn bị clips

Để sử dụng Keyframe, trước tiên bạn cần chuẩn bị clip của mình bằng cách đánh dấu các điểm. Các điểm này xác định thời gian vào và ra của hoạt ảnh và giúp bạn theo dõi các Keyframe. Khi bạn hoàn tất việc thiết lập Keyframe, bạn đã sẵn sàng bắt đầu tạo hoạt ảnh cho clips của mình.

Các tìm kiếm liên quan đến chủ đề “keyframe css”

Animation CSS Keyframe là gì
Keyframe CSS là gì animation css fade-in
Animate CSS Transition keyframes
Keyframe CSS animation Keyframe styled-components

Bài viết liên quan

Hide scrollbar CSS là gì? 3 Lưu ý cần nhớ khi ẩn thanh cuộnCustom scrollbar css là gì? Hướng dẫn 2 cách sử dụng cơ bảnBox sizing trong css là gì? Hướng dẫn sử dụng 2 value đơn giảnThuộc tính z index trong css là gì? Hướng dẫn 2 cách sử dụng dễ hiểuThuộc tính Float CSS là gì? Phân biệt Float và Clear trong CSS

Định nghĩa và sử dụng

Thuộc tính @keyframes dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation.

Cấu trúc

@keyframes tênAnimation { giá trị { css } } @-moz-keyframes tênAnimation { giá trị { css } } @-webkit-keyframes tênAnimation { giá trị { css } }

Trong đó:

  • @-moz-keyframes hỗ trợ cho firefox.
  • @-webkit-keyframes hỗ trợ cho Google Chrome và Safari.

@keyframes có các giá trị như sau:

Thuộc tính giá trị Ví dụ Mô tả
@keyframes Tên animation @keyframes aniName{} Xác định tên cho @keyframes.
from {thuộc tính: giá trị;}

to {thuộc tính: giá trị;}

from {top: 0;}

to {bottom: 100px; color: red;}

Định dạng thành phần theo trí đầu và vị trí cuối.
Phần trăm {thuộc tính: giá trị;} 0% {top: 0;}

50% {top: 150px;}

100% {top: 50px;}

Định dạng thành phần theo phần trăm thời gian hành động diễn ra.

Ví dụ

HTML viết:


HỌC WEB CHUẨN


Hiển thị trình duyệt khi chưa có CSS:

HỌC WEB CHUẨN

CSS viết:

p { position: relative; width: 130px; animation: aniName 10s infinite; -moz-animation: aniName 10s infinite; -webkit-animation: aniName 10s infinite; -o-animation: aniName 10s infinite; } @keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } } @-moz-keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } } @-webkit-keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } } @-o-keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } }

Hiển thị trình duyệt khi có CSS:

HỌC WEB CHUẨN

Trình duyệt và hệ điều hành hỗ trợ

Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho @keyframes:

Trình duyệt PC Smartphone – Tablets
@keyframes 10 4

-moz-

12

-o-

19

-webkit-

5.1

-webkit-

3.2

-webkit-

2.1

-webkit-

Cách sử dụng thuộc tính @keyframes trong CSS để tạo hiệu ứng chuyển động cho phần tử HTML

Thuộc tính @keyframes trong CSS dùng để tạo ra một hiệu ứng chuyển động.

Sau đó, một phần tử có thể gọi đến tên của hiệu ứng chuyển động để nó được chuyển động.

Giải thích thêm: Hiệu ứng chuyển động là một tập hợp các quy tắc chỉ định trong một khoảng thời gian nào đó thì sẽ có hành động gì diễn ra (hành động đó là một tập hợp các các cặp thuộc tính : giá trị thuộc tính để thay đổi vị trí, kích thước, màu sắc,…. của phần tử)

Ví dụ:

Đoạn mã dưới đây tạo một hiệu ứng chuyển động có tên là “dịch chuyển” với chức năng phần tử sẽ được chuyển sang phải 600px


@keyframes dich_chuyen { 0% {left:0px;} 100% {left:600px;} }

Sau đó phần tử div sẽ dùng thuộc tính animation gọi đến tên của hiệu ứng chuyển động để nó được chuyển động


div{ width:100px; height:100px; background-color:black; position:relative; animation:dich_chuyen 5s infinite; }

cách key frame kiểu mới trong capcut pc
cách key frame kiểu mới trong capcut pc

Cách sử dụng thuộc tính @keyframes

Cú pháp:


@keyframes animationname { keyframes-selector {css-styles;} }

Giải thích ý nghĩa các tham số trong thuộc tính @keyframes:

Tham số Mô tả
animationname

Tên của hiệu ứng chuyển động

keyframes-selector

Tỷ lệ phần trăm của thời gian hiệu ứng chuyển động.

Lưu ý: Bạn có thể sử dụng nhiều keyframes-selector trong một hiệu ứng chuyển động

css-styles

Cặp thuộc tính : giá trị thuộc tính

Một số ví dụ về cách sử dụng thuộc tính @keyframes

Tạo hiệu ứng chuyển động “Xuống => Lên => Xuống”

Xem ví dụ

@keyframes dich_chuyen { 0% {top:0px;} 50% {top:200px;} 70% {top:100px;} 100% {top:300px;} }

Tạo hiệu ứng chuyển động “Theo hình chữ nhật”

Xem ví dụ

@keyframes dich_chuyen { 0% {top:0px;left:0px;} 50% {top:0px;left:400px;} 70% {top:200px;left:400px;} 90% {top:200px;left:0px;} 100% {top:0px;left:0px;} }

Tạo hiệu ứng chuyển động “Theo hình chữ nhật + đổi màu + thay đổi kích thước phần tử”

Xem ví dụ

@keyframes dich_chuyen { 0% {top:0px;left:0px;background-color:red;} 50% {top:0px;left:400px;background-color:green;width:150px;height:150px;} 70% {top:200px;left:400px;background-color:blue;width:50px;height:50px;} 90% {top:200px;left:0px;background-color:yellow;width:150px;height:150px;} 100% {top:0px;left:0px;background-color:red;width:50px;height:50px;} }

Keyframe là gì? Tầm quan trọng của Keyframe trong sản xuất Video

Thuật ngữ Keyframe là một thuật ngữ quen thuộc trong sản xuất video. Hãy cùng colorME tìm hiểu Keyframe là gì và tầm quan trọng của Keyframe trong quá trình edit video nha.

Hiểu cơ bản về ngôn ngữ CSS trong 30 phút | Vũ Nguyễn Coder
Hiểu cơ bản về ngôn ngữ CSS trong 30 phút | Vũ Nguyễn Coder

Keyframe là gì?

Keyframe là một bản vẽ thay đổi một chút từ khung hình này sang khung hình tiếp theo bắt nguồn từ hoạt ảnh, rất lâu trước khi chỉnh sửa video kỹ thuật số ra đời. Thuật ngữ này xuất phát từ hoạt hình vẽ tay, mỗi khung hình sẽ được vẽ khác đi một vài điểm so với khung hình trước đó để tạo ra ảo giác chuyển động. Trong chỉnh sửa video ngày nay, Keyframe được sử dụng để đánh dấu thời điểm cụ thể mà bạn muốn bắt đầu hoặc kết thúc hiệu ứng.

Trong những ngày đầu của phim hoạt hình (Animation), mỗi khung hình của quá trình sản xuất phải được vẽ bằng tay. Giờ đây, các nhà làm phim hoạt hình (Animators) có thể tiết kiệm hàng giờ làm việc bằng cách sử dụng Keyframe Animation kỹ thuật số để xác định các yếu tố khác nhau của đồ họa và chọn cách các yếu tố đó sẽ di chuyển hoặc thay đổi theo thời gian.

Để tạo một hành động trong chuỗi hoạt ảnh kỹ thuật số, trước tiên bạn cần xác định điểm bắt đầu và điểm kết thúc cho hành động đó. Những điểm đánh dấu này được gọi là Keyframe và chúng được sử dụng làm Anchor Point (vị trí khởi đầu cho mọi thông số biến đổi của layer) cho các hành động trong tất cả các loại chương trình khác nhau, bao gồm Adobe After Effects, Animate và Character Animator.

Xem thêm: Top 10 phần mềm Edit Video cho người mới bắt đầu

Các thuộc tính con

Các thuộc tính con của animation:

animation-name: pacman;

Tên của hiệu ứng (định nghĩa keyframes)

animation-duration: 3s;

Tổng thời gian diễn ra 1 lần hiệu ứng

animation-timing-function: linear;

Cách chạy hiệu ứng (giống transition-timing-function): xác định đường cong tốc độ (đồ thị tốc độ chuyển động) hoặc tốc độ của hiệu ứng

Các giá trị cho thuộc tính này bao gồm:

ease

,

linear

,

ease-in

,

ease-out

,

ease-in-out

,

initial

,

inherit

, và default value là

ease

: bắt đầu chuyển động chậm, rồi nhanh dần, rồi chậm lại

Nếu muốn có các timing function phức tạp hơn, bạn có thể tự tạo sử dụng đường cong tốc độ

cubic-bezier

(đọc thêm)
có thể xem thêm ví dụ tại đây và bài viết mô tả tại đây

animation-iteration-count: 1;

Số lần chạy hiệu ứng (infinite nếu muốn chạy liên tục vô hạn) Chọn số lần lặp lại cho hiệu ứng, default không set sẽ là 1.

Các giá trị có thể nhận:


  1. number

    : 1 con số nào đó biểu thị số lần,

  2. infinite

    : lặp lại vô hạn lần

  3. initial

    : đặt về giá trị default

  4. inherit

    : thừa kế thuộc tính này từ đối tượng cha chứa nó

animation-direction: normal;

Hướng của hiệu ứng: chạy xuôi hay ngược hành động, hay cả hai

Các giá trị nhận được:


  1. normal

    : hành động chạy xuôi bình thường

  2. reverse

    : hành động chạy ngược chiều (từ keyframes 100% về 0%)

  3. alternate

    : chạy xuôi đến 100% xong chạy ngược lại về 0%

  4. alternate-reverse

    : chạy ngược từ 100% về 0% rồi xuôi lại về 100%

  5. initial

    : đặt lại về giá trị default

  6. inherit

    : thừa kế thuộc tính này từ đối tượng cha chứa nó

Xem thêm ví dụ tại đây

animation-delay: 2s;

Thời gian trễ trước khi xảy ra hiệu ứng: chờ 2s rồi mới bắt đầu chạy hiệu ứng

Thuộc tính này cho phép bạn chọn thời gian bắt đầu hiệu ứng, hiệu ứng sẽ không được bắt đầu cho tới thời điểm bạn chọn

animation-play-state: running;

Giống như nút play, pause vậy, chọn running để hiệu ứng chạy bình thường, pause để tạm dừng hiệu ứng lại.

Các giá trị nhận được:


  1. running

    : giá trị mặc định, chỉ định cho chạy hiệu ứng

  2. pause

    : chỉ định tạm dừng hiệu ứng

  3. initial

    : về giá trị mặc định

  4. inherit

    : thừa kế thuộc tính này từ đối tượng cha chứa nó

Xem ví dụ tại đây

animation-fill-mode: forwards;

Style cho đối tượng khi nó ko chạy hiệu ứng (trước khi bắt đầu hiệu ứng, sau khi hiệu ứng kết thúc, hoặc cả 2). Thường thì css của animation sẽ không ảnh hưởng được tới đối tượng khi mà nó chưa được kích hoạt hoăc sau khi đã chạy xong hiệu ứng, nhưng nhờ có

animation-fill-mode

thì ta có thể làm được điều này: áp css của animation lên đối tượng ngay cả khi hiệu ứng đang không diễn ra.

Các giá trị nhận được:


  1. backwards

    : Áp style của hiệu ứng lên đối tượng trước khi xảy ra hiệu ứng (khi đó thì style tại 0% sẽ được sử dụng)

  2. forwards

    : sau khi hiệu ứng chạy xong thì giữ nguyên style của 100% cho đối tượng

  3. both

    : áp style của 0% lên đối tượng trước khi xảy ra hiệu ứng, sau khi hiệu ứng chạy xong thì giữ nguyên style của 100% trên nó

  4. normal

    (default): style của hiệu ứng không ảnh hưởng tới đối tượng trước và sau khi chạy hiệu ứng
  • Tham khảo ví dụ tại đây
How To Create a Simple Animation Movie In Notepad Using HTML | Animation In HTML | Html Animation
How To Create a Simple Animation Movie In Notepad Using HTML | Animation In HTML | Html Animation

Keyframe là gì?

Có thể hiểu keyframe là một điểm chốt (hay còn gọi là chìa khoá “key”) trên timeline đánh dấu sự bắt đầu hoặc kết thúc của quá trình chuyển đổi các thông số như Position (vị trí), Opacity (độ trong suốt), Scale (phóng to/ thu nhỏ), Rotation (quay), Color (màu sắc),… ở một thời điểm nhất định. Việc thay đổi các thông số này qua thời gian giúp tạo nên chuyển động cho video.

(ảnh: Thaohy.blogspot.com)

Trong phần timeline của các phần mềm dựng video cho phép các bạn chèn keyframe để tạo ra chuyển động cho video. Bạn phải tạo ít nhất 2 keyframe và đưa thông tin về vị trí và thời gian chuyển động bắt đầu và kết thúc. Khi 2 keyframe có giá trị thông số khác nhau, phần mềm sẽ tự tính toán để đưa thông số ở giữa 2 điểm chốt chuyển dần từ giá trị điểm đầu đến giá trị điểm cuối.

Short syntax

Có thể viết ngắn gọn các thuộc tính con trên chỉ trong 1 dòng như sau:


animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

Để dùng được short syntax thì bạn nhớ điền đúng giá trị, và có ít nhất 2 thuộc tính con trong short syntax nhé

Bạn đã biết khi nào dùng CSS Flexbox hay Grid chưa ?
Bạn đã biết khi nào dùng CSS Flexbox hay Grid chưa ?

Thành thạo Keyframe – làm chủ mọi phần mềm chỉnh sửa video

Có thể thấy, quá trình để tạo dựng nên những thước phim đẹp mắt, hấp dẫn đòi hỏi nhiều kỹ thuật từ người làm ra chúng. Nếu bạn có hứng thú với công việc sản xuất video, mong muốn tìm hiểu chuyên sâu hơn với phần mềm After Effects nói chung và Keyframe Animation nói riêng, khóa học 3D Animation tại VTC Academy Plus sẽ là lựa chọn hoàn hảo.

Với cơ sở vật chất tiên tiến chuẩn quốc tế và nội dung đào tạo không ngừng cập nhật, VTC Academy Plus hứa hẹn mang đến trải nghiệm học tập sát với thực tiễn nhu cầu doanh nghiệp trong ngành, luôn hỗ trợ học viên trong việc học tập và thực hành các dự án thực tế. Ngoài ra, tại đây, học viên sẽ có cơ hội được liên thông du học tại Viện Thiết kế Quốc tế RUBIKA (Pháp).

RUBIKA được đánh giá là trường đào tạo 3D Animation đứng thứ hai trên thế giới (theo chuyên trang Animation Career Review) với phương pháp giảng dạy chú trọng vào thực hành và sự kết hợp tư duy thẩm mỹ cùng với kỹ năng sử dụng thành thạo các công cụ cần thiết.

Như vậy, hy vọng bài viết trên có thể giúp bạn hình dung rõ hơn về Keyframe là gì, cách sử dụng và phân loại Keyframe trong phần mềm After Effects. Liên hệ ngay với VTC Academy Plus nếu bạn có bất kỳ thắc mắc nào về ngành 3D Animation hoặc phương thức nhập học.

Đa hiệu ứng

Để thêm cùng lúc nhiều hiệu ứng đã được định nghĩa keyframes, thì chỉ cần ngăn cách các define của mỗi hiệu ứng bởi dấu phẩy như sau:


.div { animation: pacman 3s, disapear 4s; }

Kết

Bài này đã giới thiệu cho bạn về Animation, hy vọng có thể giúp cho “trình” css của bạn tăng lên . Bạn có thể tham khảo thêm 1 nguồn hữu ích này nhé: Animate.css

All rights reserved

Thuộc tính keyframe css là gì? 3 yếu tố cấu thành không thể thiếu

27/05/2022 16:28 pm | Lượt xem : 2409

Muốn thiết kế nên một website đẹp, bạn cần nắm vững kiến thức về các thuộc tính thông dụng. Một thuộc tính mà chúng tôi muốn giới thiệu hôm nay chính là thuộc tính Keyframe CSS. Đây là một thuộc tính được dùng để điều khiển diễn biến hoạt động của các thành phần. Keyframe CSS được sử dụng đi kèm với thuộc tính animation. Tại bài viết hôm nay chúng tôi sẽ giới thiệu đến bạn đọc những thông tin hữu ích về thuộc tính Keyframe CSS. Hướng dẫn cách sử dụng thuộc tính này cũng như các ví dụ thực tế. Mời bạn cùng theo dõi!

Contents

  • Thuộc tính Keyframe CSS là gì?
  • Một ví dụ về thuộc tính Keyframe CSS
  • Trình duyệt và hệ điều hành hỗ trợ keyframe css
  • Giới thiệu về animation
  • Các thuộc tính con của animation
  • Kết luận
  • Các tìm kiếm liên quan đến chủ đề “keyframe css”
JSX là gì? Tại sao cần JSX?
JSX là gì? Tại sao cần JSX?

Các loại Keyframe trong After Effects

After Effects là phần mềm dùng để chỉnh sửa video khá phổ biến hiện nay. Có đến 5 loại Keyframe khác nhau trong After Effects, và mỗi loại đều đi kèm với biểu tượng (icon) đặc trưng riêng.

Linear Keyframe (Keyframe chuyển động thẳng)

Đây là dạng cơ bản nhất trong After Effects và nó sử dụng tốc độ thay đổi đồng đều thẳng giữa hai Keyframe, được biểu thị mặc định bằng biểu tượng kim cương. Nhược điểm của loại Keyframe này là hoạt động một cách bất ngờ và cứng nhắc. Do đó, hầu hết các nhà làm phim hoạt hình chuyên nghiệp và Motion Designer sẽ không sử dụng chúng thường xuyên.

Auto Bezier (Keyframe tự động chuyển độ cong)

Auto Bezier lấy Linear Keyframe làm tiền đề và làm mượt tỷ lệ thay đổi giữa hai Keyframe bằng cách tạo đường cong cho chúng. Điều này cho phép các phần tử di chuyển linh hoạt hơn và không bị cứng nhắc. Auto Bezier xuất hiện dưới dạng hình tròn và tự động thay đổi các chốt điều hướng để làm mượt chuyển động. Để chuyển Linear Keyframe thành Auto Bezier, chỉ cần giữ phím Ctrl (hoặc Cmd trên Macbook), sau đó nhấp vào Keyframe ở phần preview của After Effects và lặp lại lần nữa nếu bạn muốn hoàn tác.

Continuous Bezier (Keyframe thủ công chuyển động cong)

Trong khi Auto Bezier tự động làm mượt chuyển động thì Continuous Bezier lại liên tục làm như vậy theo cách thủ công. Để thực hiện, bạn cần đánh dấu các Keyframe mà bạn muốn thay đổi, sau đó nhấn vào phím Ctrl (hoặc Cmd với Macbook) + Shift + K trên bàn phím. Tiếp theo, một hộp thông tin xuất hiện cho phép bạn điều chỉnh nội suy theo cách thủ công.

Continuous Bezier được biểu thị bằng hình đồng hồ cát. Bạn sẽ nhìn thấy chúng khi thêm hiệu ứng hoặc thêm Keyframe Assistant như Easy Ease bằng cách nhấp chuột phải vào một trong các Keyframe có trên timeline, chuyển đến Keyframe Assistant -> Easy Ease.

Bezier Keyframe – Keyframe cong

Bezier là nơi bạn có toàn quyền kiểm soát các thông số và chức năng với đường chuyển động (Graph Motion) hoặc biểu đồ giá trị (Value Graph). Để có thể tùy ý điều chỉnh, bạn cần truy cập vào Graph Editor. Việc tạo ra Bezier Keyframe không làm thay đổi hình dạng Keyframe mà chỉ đơn giản là thay đổi đường chuyển động của vật thể.

Xem thêm: Motion Graphic là gì?

Phân biệt đường cong của Auto Bezier, Continous Bezier và Bezier

Hold Keyframe – Keyframe dừng

Hold Keyframe dùng để khóa một hiệu ứng hoặc một thông số ở cố định một vị trí nào đó. Điều này được ứng dụng vào các cảnh đóng băng, tạo cảm giác như chúng ta đang làm phim stop motion.

Loại Keyframe này được biểu thị bằng hình vuông, bạn có thể áp dụng chúng bằng cách chọn Layer của bạn, sau đó đi tới Layer -> Time -> Freeze Frame.

Các cách ứng dụng Keyframe để tạo hiệu ứng

Thu phóng chậm (Slow Zoom)

Đây là một trong những Keyframe Animation được các Video Editors sử dụng rất nhiều, kể cả chuyên nghiệp lẫn nghiệp dư bởi nó rất đơn giản để tạo. Trước tiên, hãy chọn một vị trí trên timeline video nơi bạn muốn thu phóng bắt đầu. Đặt Keyframe tại đó và chia tỷ lệ. Sau đó, di chuyển về phía trước ngay trên timeline và đặt Keyframe thứ hai nơi bạn muốn thu phóng kết thúc. Tiếp tục điều chỉnh tỷ lệ và di chuyển hình ảnh kết quả trong khung để có được ảnh cắt mong muốn.

Thu phóng nhanh (Fast Zoom)

Fast Zoom được thực hiện tương tự như Slow Zoom, tuy nhiên các Keyframe sẽ gần nhau hơn trên timeline, từ nửa giây đến một giây. Tiến hành đặt Keyframe, chọn độ phóng đại và sau đó thử phát video để xem kết quả phù hợp với mong muốn của bạn hay chưa.

Thay đổi vị trí của clip

Chọn clip bạn muốn thay đổi vị trí trên timeline và sau đó nhấp vào biểu tượng Keyframe. Một đường màu xanh lam mờ sẽ xuất hiện, sau đó bạn có thể di chuyển clip đến vị trí mong muốn hoặc thực hiện thay đổi với các thuộc tính khác.

Chuyển tiếp (Transition) và bộ lọc (Filters)

Có hai loại Transition Keyframe phổ biến là cắt và hòa tan. Trong đó, cắt là kiểu chuyển tiếp cơ bản nhất với việc sử dụng một clip khác để thay thế cho clip trước đó và hòa tan là một quá trình chuyển đổi dần dần, clip đầu tiên dần biến mất trong khi clip thứ hai dần xuất hiện.

Slow Motion

Bằng cách thiết lập Keyframe, bạn có thể tạo chuyển động chậm mượt mà, nhất quán hoặc tăng tốc độ video của mình để tạo hiệu ứng nhịp độ nhanh thú vị. Ở giữa các Keyframe, phần mềm chỉnh sửa video của bạn sẽ tự động nội suy để tạo chuyển động mượt mà, chân thực.

Bạn đã thực sự “thành thạo” CSS Flexbox chưa ? 🤔
Bạn đã thực sự “thành thạo” CSS Flexbox chưa ? 🤔

Tầm quan trọng của Keyframe trong sản xuất video

Keyframe là mắt xích quan trọng trong mọi quá trình sản xuất video, xuất hiện trong toàn bộ tính năng của After Effects.

Đối với chỉnh sửa video cơ bản: Keyframe được sử dụng để tạo ra các hiệu ứng đặc biệt và kiểm soát các thay đổi trong video. Với các keyframes, bạn có thể tạo ra những thứ như chuyển động chậm, đảo ngược … theo ý muốn.

Đối với chỉnh sửa video nâng cao: Keyframe không chỉ có vai trò đưa các Layer (lớp) từ vị trí này sang vị trí khác trong Composition mà còn được sử dụng với nhiều tính năng khác. Ngoài ra, Keyframe hỗ trợ điều chỉnh thông số của layer (lớp) trong After Effect như:

  • Vị trí (Position): Thay đổi vị trí video từ nơi này sang nơi khác trong một khoảng thời gian nhất định.
  • Độ trong suốt (Opacity): Thay đổi độ trong suốt của video từ 0% đến 100%. Chẳng hạn, nếu bạn muốn một đoạn phim từ màu đen sang màu trắng hoặc trong suốt, bạn nên thêm một Keyframe ở đầu video và đặt Transparency về 0%.
  • Chèn Keyframe vào hiệu ứng: Tính năng này hỗ trợ bạn linh hoạt sáng tạo các sản phẩm để trở nên sinh động, cuốn hút hơn.

Đối với phim hoạt hình: Bạn nên tạo nhiều Keyframe cho video, tối thiểu hai Keyframe để tạo khung và điểm khởi đầu liên tục cho phim hoạt hình của bạn. Điều này giúp cho người xem cảm thấy hứng thú, tạo cảm giác kích thích và tránh sự nhàm chán khi xem phim.

Các loại Keyframe được sử dụng phổ biến trong After Effects

Trong After Effects, một số loại keyframe được sử dụng phổ biến nhất phải kể đến như:

Keyframe chuyển động thẳng – Linear Keyframes

Đây là loại keyframe được sử dụng phổ biến nhất trong After Effects. Keyframe chuyển động thẳng được tạo tự động khi bạn thay đổi thông số nào đó. Nó xuất hiện dưới dạng hình thoi hoặc hình kim cương. Vì dạng keyframe này là đường thẳng, nên chuyển động khá cứng nhắc và đột ngột. Do đó, nó không được các designer ưu tiên sử dụng trong Motion Graphics.

Keyframe chuyển động cong tự động – Auto Bezier

Bạn đã biết gì về loại Keyframe là gì? Thực chất, Auto Bezier là chuyển động cong được tạo thành từ Linear Keyframe. Những ưu điểm của nó là có độ mượt mà hơn chuyển động thẳng. Auto Bezier xuất hiện dưới dạng hình tròn có tác dụng làm thay đổi hướng chuyển động của Keyframe.

Chỉ với thao tác đơn giản giữ phím Ctrl và click vào điểm đầu của Keyframe. Như thế bạn đã có thể thay đổi từ chuyển động thẳng thành chuyển động cong.

Keyframe chuyển động cong thủ công – Continuous Bezier

Nếu như Auto Bezier có tác dụng tự động làm mượt mà chuyển động cong. Thì Continuous keyframe sẽ tạo đường cong chuyển động một cách thủ công. Như thế, đường cong chuyển động hoàn toàn được tạo theo mong muốn của bạn.

Đối với tổ hợp tất cả keyframe, bạn có thể thao tác tạo chuyển động cong thủ công. Thao tác đơn giản với tổ hợp phím Ctrl-Shift-K, một hộp thoại sẽ hiện ra. Lúc này, bạn có thể tùy chỉnh chuyển động theo mong muốn của bạn.

Keyframe dừng – Hold keyframe

Trong quá trình biên tập video, nếu bạn muốn khóa một hiệu ứng tại 1 vị trí bất kỳ. Hold Keyframe sẽ giúp bạn edit mục đích này. Nó tạo ra hiệu ứng video giống như đang làm phim stop motion.

Image Rotate Animations using CSS Keyframes - 3 Types of Rotations Hover and Infinite - CSS, HTML
Image Rotate Animations using CSS Keyframes – 3 Types of Rotations Hover and Infinite – CSS, HTML

Tạm kết

Hi vọng bài viết này đã giúp bạn hiểu thêm phần nào về keyframe và có thể sử dụng chúng một cách hiệu quả trong quá trình chỉnh sửa video. Bộ đôi biên tập và sản xuất video Premiere và After Effects chắc chắn sẽ là trợ thủ đắc lực giúp bạn sáng tạo thật nhiều video ấn tượng. Đừng quên tham khảo ngay KHOÁ HỌC PREMIERE CƠ BẢN và KHOÁ HỌC AFTER EFFECTS CƠ BẢN tại ColorME nhé!

Thu Trang

Keyframe là gì? Các loại Keyframe trong After Effects

Nếu bạn mới gia nhập “thế giới” Video Editor hay có yêu thích với việc chỉnh sửa video, chắc hẳn bạn đã từng nghe qua Keyframe và tự hỏi: “Keyframe là gì?”. Mọi phần mềm hoặc ứng dụng chỉnh sửa video chuyên nghiệp đều có Keyframe. Đó là một công cụ cần thiết, phổ biến cho bất kỳ công việc chỉnh sửa video nào bao gồm chuyển động, hoạt ảnh hoặc chuyển tiếp.

Keyframe là gì?

Keyframe là một bản vẽ thay đổi một chút từ khung hình này sang khung hình tiếp theo bắt nguồn từ hoạt ảnh, rất lâu trước khi chỉnh sửa video kỹ thuật số ra đời. Thuật ngữ này xuất phát từ hoạt hình vẽ tay, mỗi khung hình sẽ được vẽ khác đi một vài điểm so với khung hình trước đó để tạo ra ảo giác chuyển động. Trong chỉnh sửa video ngày nay, Keyframe được sử dụng để đánh dấu thời điểm cụ thể mà bạn muốn bắt đầu hoặc kết thúc hiệu ứng.

Trong những ngày đầu của phim hoạt hình (Animation), mỗi khung hình của quá trình sản xuất phải được vẽ bằng tay. Giờ đây, các nhà làm phim hoạt hình (Animators) có thể tiết kiệm hàng giờ làm việc bằng cách sử dụng Keyframe Animation kỹ thuật số để xác định các yếu tố khác nhau của đồ họa và chọn cách các yếu tố đó sẽ di chuyển hoặc thay đổi theo thời gian.

Để tạo một hành động trong chuỗi hoạt ảnh kỹ thuật số, trước tiên bạn cần xác định điểm bắt đầu và điểm kết thúc cho hành động đó. Những điểm đánh dấu này được gọi là Keyframe và chúng được sử dụng làm Anchor Point (vị trí khởi đầu cho mọi thông số biến đổi của layer) cho các hành động trong tất cả các loại chương trình khác nhau, bao gồm Adobe After Effects, Animate và Character Animator.

Xem thêm: Top 10 phần mềm Edit Video cho người mới bắt đầu

Day 2: Đứng hình mất 5s với Profile Card giới thiệu bản thân | 30 Days Thực chiến HTML CSS JS
Day 2: Đứng hình mất 5s với Profile Card giới thiệu bản thân | 30 Days Thực chiến HTML CSS JS

Keywords searched by users: keyframe css là gì

Thuộc Tính Keyframe Css Là Gì? 3 Yếu Tố Cấu Thành
Thuộc Tính Keyframe Css Là Gì? 3 Yếu Tố Cấu Thành
Thuộc Tính Keyframe Css Là Gì? 3 Yếu Tố Cấu Thành
Thuộc Tính Keyframe Css Là Gì? 3 Yếu Tố Cấu Thành
Keyframe Là Gì? Có Bao Nhiêu Loại Keyframe Trong After Effects?
Keyframe Là Gì? Có Bao Nhiêu Loại Keyframe Trong After Effects?
Keyframe Là Gì? Những Kiến Thức Cần Biết Keyframe Chi Tiết
Keyframe Là Gì? Những Kiến Thức Cần Biết Keyframe Chi Tiết
Keyframe Là Gì? Một Số Keyframe Phổ Biến Trong After Effects
Keyframe Là Gì? Một Số Keyframe Phổ Biến Trong After Effects
Keyframe Là Gì? Các Loại Keyframe Trong After Effects
Keyframe Là Gì? Các Loại Keyframe Trong After Effects
Keyframe Là Gì? Những Kiến Thức Cần Biết Keyframe - Ostrichmotion - Video  Marketing Đỉnh Cao
Keyframe Là Gì? Những Kiến Thức Cần Biết Keyframe – Ostrichmotion – Video Marketing Đỉnh Cao
Keyframe Là Gì? Một Số Keyframe Phổ Biến Trong After Effects
Keyframe Là Gì? Một Số Keyframe Phổ Biến Trong After Effects
Keyframe Là Gì? Những Kiến Thức Cần Biết Keyframe - Ostrichmotion - Video  Marketing Đỉnh Cao
Keyframe Là Gì? Những Kiến Thức Cần Biết Keyframe – Ostrichmotion – Video Marketing Đỉnh Cao
Keyframe Là Gì? Vai Trò Của Keyframe Trong Thiết Kế
Keyframe Là Gì? Vai Trò Của Keyframe Trong Thiết Kế
98.1 Học Animation Css Từ Cơ Bản Đến Nâng Cao - Hướng Dẫn Sử Dụng Css  Keyframes - Youtube
98.1 Học Animation Css Từ Cơ Bản Đến Nâng Cao – Hướng Dẫn Sử Dụng Css Keyframes – Youtube
Keyframe Là Gì? Một Số Keyframe Phổ Biến Trong After Effects
Keyframe Là Gì? Một Số Keyframe Phổ Biến Trong After Effects
Keyframe Là Gì? Có Bao Nhiêu Loại Keyframe Trong After Effects?
Keyframe Là Gì? Có Bao Nhiêu Loại Keyframe Trong After Effects?
Cách Sử Dụng Và Tùy Biến Hiệu Ứng @Keyframes Animation Trong Css
Cách Sử Dụng Và Tùy Biến Hiệu Ứng @Keyframes Animation Trong Css
Thuộc Tính Outline Css Là Gì? 2 Ví Dụ Cơ Bản Cần Biết
Thuộc Tính Outline Css Là Gì? 2 Ví Dụ Cơ Bản Cần Biết
Bạn Đã Thực Sự Nắm Rõ Css Animation ? | Devmaster
Bạn Đã Thực Sự Nắm Rõ Css Animation ? | Devmaster
Hiệu Ứng Chuyển Động Animation Css Cho Người Mới Bắt Đầu - Tin Tức Tên Miền  Hosting
Hiệu Ứng Chuyển Động Animation Css Cho Người Mới Bắt Đầu – Tin Tức Tên Miền Hosting
Tập Tành Tìm Hiểu Css Animation - Bài 3: Keyframes & Animation
Tập Tành Tìm Hiểu Css Animation – Bài 3: Keyframes & Animation
Keyframe Là Gì? Các Loại Keyframe Trong After Effects
Keyframe Là Gì? Các Loại Keyframe Trong After Effects
Css Animation Cho Người Mới Bắt Đầu
Css Animation Cho Người Mới Bắt Đầu
Keyframe Là Gì? Những Kiến Thức Cần Biết Keyframe - Ostrichmotion - Video  Marketing Đỉnh Cao
Keyframe Là Gì? Những Kiến Thức Cần Biết Keyframe – Ostrichmotion – Video Marketing Đỉnh Cao
Keyframe Là Gì? Những Kiến Thức Cần Biết Keyframe - Ostrichmotion - Video  Marketing Đỉnh Cao
Keyframe Là Gì? Những Kiến Thức Cần Biết Keyframe – Ostrichmotion – Video Marketing Đỉnh Cao
Hiệu Ứng Chuyển Động Animation Trong Css - Quantrimang.Com
Hiệu Ứng Chuyển Động Animation Trong Css – Quantrimang.Com
Các Loại Keyframe Trong After Effects
Các Loại Keyframe Trong After Effects
Keyframe Là Gì? Các Loại Keyframe Trong After Effects
Keyframe Là Gì? Các Loại Keyframe Trong After Effects
Cách Sử Dụng Và Tùy Biến Hiệu Ứng @Keyframes Animation Trong Css
Cách Sử Dụng Và Tùy Biến Hiệu Ứng @Keyframes Animation Trong Css
Thuộc Tính Outline Css Là Gì? 2 Ví Dụ Cơ Bản Cần Biết
Thuộc Tính Outline Css Là Gì? 2 Ví Dụ Cơ Bản Cần Biết
Hick'S Law Là Gì Trong Uxui Design - Keyframe
Hick’S Law Là Gì Trong Uxui Design – Keyframe
Css @Keyframes Animation - Làm Chủ Và Xây Dựng Animation Qua Ví Dụ
Css @Keyframes Animation – Làm Chủ Và Xây Dựng Animation Qua Ví Dụ
Keyframe Là Gì? Các Loại Keyframe Trong After Effects
Keyframe Là Gì? Các Loại Keyframe Trong After Effects
Keyframe Là Gì? Những Kiến Thức Cần Biết Keyframe - Ostrichmotion - Video  Marketing Đỉnh Cao
Keyframe Là Gì? Những Kiến Thức Cần Biết Keyframe – Ostrichmotion – Video Marketing Đỉnh Cao
Mẹo Và Thủ Thuật Dùng Animation Trong Css Mà Bạn Cần Biết - Quantrimang.Com
Mẹo Và Thủ Thuật Dùng Animation Trong Css Mà Bạn Cần Biết – Quantrimang.Com
Keyframe Là Gì? Các Loại Keyframe Trong After Effects
Keyframe Là Gì? Các Loại Keyframe Trong After Effects
Tập Tành Tìm Hiểu Css Animation - Bài 3: Keyframes & Animation
Tập Tành Tìm Hiểu Css Animation – Bài 3: Keyframes & Animation
Keyframe Là Gì? Tầm Quan Trọng Của Keyframe Trong Sản Xuất Video
Keyframe Là Gì? Tầm Quan Trọng Của Keyframe Trong Sản Xuất Video
Keyframe Là Gì? Những Kiến Thức Cần Biết Keyframe - Ostrichmotion - Video  Marketing Đỉnh Cao
Keyframe Là Gì? Những Kiến Thức Cần Biết Keyframe – Ostrichmotion – Video Marketing Đỉnh Cao
Wireframe Là Gì? Cách Thiết Lập Wireframe Hiệu Quả? | Topdev
Wireframe Là Gì? Cách Thiết Lập Wireframe Hiệu Quả? | Topdev

See more here: kientrucannam.vn

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *