Hướng dẫn học css animation

Question

Animation (còn gọi là hiệu ứng) là tiến trình tạo các thay đổi tới hình dáng và tạo các sự chuyển động của các phần tử.

Nội dung chính Show

Qui tắc @keyframes trong CSS
Ví dụ của qui tắc @keyframes với Left Animation
CSS Animation là gì?
Quy tắc Keyframe
Thuộc tính animation-delay
Thuộc tính animation-iteration-count
Thuộc tính animation-direction
Thuộc tính animation-timing-function
Thuộc tính animation-fill-mode
Gộp chung các thuộc tính

Qui tắc @keyframes trong CSS

Qui tắc @keyframs sẽ điều khiển các bước hiệu ứng trung gian trong CSS3.

Ví dụ của qui tắc @keyframes với Left Animation


@keyframes animation {
   from {background-color: pink;}
   to {background-color: green;}
}
div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
}

```Như trong ví dụ trên, chúng ta đã xác định chiều cao, độ rộng, màu, tên và quãng thời gian của hiệu ứng với cú pháp mẫu của qui tắc @keyframes.

Hiệu ứng di chuyển sang trái (Left Animation) trong CSS
-------------------------------------------------------

Vi du hieu ung di chuyen tu trai qua phai.

Reload page

```Kết quả là:−

Left Animation sử dụng @keyframes trong CSS ------------------------------------------- ```

Vi du hieu ung di chuyen tu phai qua trai.

Reload page ```Kết quả là: Loạt bài hướng dẫn **Học CSS cơ bản và nâng cao** của chúng tôi dựa trên nguồn tài liệu của: [Tutorialspoint](http://www.tutorialspoint.com/index.htm) và [W3Schools](http://www.w3schools.com/css/)

Mình liên tục lấy cảm hứng từ các trang web có thiết kế sáng tạo. Mình thấy rất nhiều trang web có những CSS rất đẹp nên quyết tâm tìm hiểu thêm về cách tạo Animations chỉ bằng CSS.

Mình thấy mình học tốt nhất bằng cách làm – tạo ra các ví dụ hữu hình để áp dụng các kỹ năng đã học. Nhiệm vụ của mình là tìm hiểu thêm về animations CSS. Để đạt được mục tiêu đó, mình đã nảy ra một ý tưởng thú vị là làm cho biểu tượng của Bang Iowa hoạt hình để xoáy như một cơn lốc xoáy.

Tạo Logo

Logo của Cyclone vào cuối những năm 80 đến đầu những năm 90 đại diện cho một cơn lốc xoáy. Đây là cơ sở mà mình bắt đầu.

Mình đã đưa .png này vào Adobe Illustrator để tạo SVG (Scalable Vector Graphic). SVG trông sắc nét ở mọi độ phân giải màn hình, có kích thước tệp siêu nhỏ và có thể dễ dàng chỉnh sửa và sửa đổi. Mình đã lần theo đường dẫn của lốc xoáy như được thấy bên dưới và tạo tệp .svg.

Animation được giới thiệu trong phiên bản CSS3, cho phép tạo hiệu ứng chuyển động mà không cần sử dụng đến Javascript hay Flash.

CSS Animation là gì?

Animation được hiểu là hiệu ứng chuyển động, sử dụng để tạo hiệu ứng di chuyển cho các phần tử và được ứng dụng khá nhiều trong các website hiện nay.

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

Ngoài ra, Animation 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ư:

Thuộc tính animation-name
Thuộc tính animation-duration
Thuộc tính animation-timing-function
Thuộc tính animation-delay
Thuộc tính animation-iteration-count
Thuộc tính aniamtion-direction
Thuộc tính animation-fill-mode

Cùng Quantrimang.com tìm hiểu kỹ hơn về keyframe và các thuộc tính cần thiết trong nội dung tiếp theo.

Quy tắc Keyframe

Bên trong quy tắc này, bạn xác định các keyframe để quy định việc phần tử sẽ chuyển động ra sao tại mỗi thời điểm nhất định.

Cú pháp của keyframe:

@keyframes Name { 
  /*code*/
}

Name: tên của animation bạn muốn tạo.
code: Các đoạn code quy định tiến trình chuyển động. Có 2 dạng:
- Sử dụng phần trăm từ 0% đến 100%.
- 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%).

Để chuyển động xảy ra cần phải kết nối @keyframes với phần tử.

Ví dụ 1: Thay đổi màu nền background, sử dụng cú pháp from...to:

/* Code animation */
@keyframes example {
  from {background-color: pink;}
  to {background-color: purple;}
}

/* Áp dụng animation vào phần tử */
div {
  width: 100px;
  height: 100px;
  background-color: purple;
  animation-name: example;
  animation-duration: 4s;
}

Ví dụ 2: Thay đổi màu nền background, sử dụng cú pháp %:

/* Code animation */
@keyframes example {
  0% {background-color: crimson;}
  25% {background-color: lightsalmon;}
  50% {background-color: pink;}
  100% {background-color: indigo;}
}

/* Áp dụng animation vào phần tử */
div {
  width: 100px;
  height: 100px;
  background-color: crimson;
  animation-name: example;
  animation-duration: 4s;
}

Code đầy đủ:

Ví dụ 3: Thay đổi cả màu nền và vị trí của phần tử

khi animation đạt 25%, 50% và 100%:

/* Code animation */
@keyframes example {
  0% {background-color:red; left:0px; top:0px;}
  25% {background-color:yellow; left:200px; top:0px;}
  50% {background-color:blue; left:200px; top:200px;}
  75% {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* Áp dụng animation vào phần tử */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Code đầy đủ:

Lưu ý: Để tạo ra hiệu ứng Animation, bạn phải xác định ít nhất hai điều:

Thuộc tính animation-duration là khoảng thời gian diễn ra hiệu ứng. Nếu phần duration không được chỉ định sẽ không xảy ra hiệu ứng vì giá trị mặc định bằng 0.
Thuộc tính animation-name xác định phần tử sẽ thực thi animation nào.

Thuộc tính animation-delay

Thuộc tính animation-delay sử dụng để xác định khoảng thời gian trì hoãn giữa thời gian một thuộc tính thay đổi và lúc hiệu ứng animation thực sự bắt đầu.

Ví dụ 1: Độ trễ 1 giây trước khi bắt đầu hiệu ứng.

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 1s;
}

Code đầy đủ:

Animation-delay chấp nhận cả giá trị âm. Nếu sử dụng các giá trị âm, animation sẽ bắt đầu như kiểu phần tử đã phát trong N giây.

Ví dụ 2: Animation sẽ bắt đầu như thể nó đã phát được 2 giây:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Thuộc tính animation-iteration-count

Thuộc tính animation-iteration-count sử dụng để thiết lập số lần thực hiện một animation. Giá trị thường là:

Một số lần nhất định
infinite: animation lặp lại liên tục và vô hạn

Ví dụ 1: Animation chạy 3 lần và dừng lại

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Ví dụ 2: Animation lặp lại liên tục và vô hạn

/* Code animation */
@keyframes example {
  from {background-color: pink;}
  to {background-color: purple;}
}

/* Áp dụng animation vào phần tử */
div {
  width: 100px;
  height: 100px;
  background-color: purple;
  animation-name: example;
  animation-duration: 4s;
}

0

Thuộc tính animation-direction

Thuộc tính animation-direction sử dụng để xác định chiều chạy của animation. Các giá trị mà animation-direction có thể nhận là:

normal: animation di chuyển bình thường tiến về phía trước (mặc định)
reverse: animation di chuyển theo hướng ngược lại, lui về sau.
alternate: animation di chuyển tiến về trước, sau đó lui theo hướng ngược lại
alternate-reverse: animation di chuyển ngược lại trước, rồi đổi chiều tiến về trước.

Ví dụ 1: Chạy animation theo hướng ngược lại

/* Code animation */
@keyframes example {
  from {background-color: pink;}
  to {background-color: purple;}
}

/* Áp dụng animation vào phần tử */
div {
  width: 100px;
  height: 100px;
  background-color: purple;
  animation-name: example;
  animation-duration: 4s;
}

1

Ví dụ 2: Chạy animation với giá trị alternate

/* Code animation */
@keyframes example {
  from {background-color: pink;}
  to {background-color: purple;}
}

/* Áp dụng animation vào phần tử */
div {
  width: 100px;
  height: 100px;
  background-color: purple;
  animation-name: example;
  animation-duration: 4s;
}

2

Ví dụ 3: Chạy animation với giá trị alternate-reverse

/* Code animation */
@keyframes example {
  from {background-color: pink;}
  to {background-color: purple;}
}

/* Áp dụng animation vào phần tử */
div {
  width: 100px;
  height: 100px;
  background-color: purple;
  animation-name: example;
  animation-duration: 4s;
}

3

Code đầy đủ để bạn tham khảo:

/* Code animation */
@keyframes example {
  from {background-color: pink;}
  to {background-color: purple;}
}

/* Áp dụng animation vào phần tử */
div {
  width: 100px;
  height: 100px;
  background-color: purple;
  animation-name: example;
  animation-duration: 4s;
}

4

Thuộc tính animation-timing-function

Thuộc tính animation-timing-function dùng để xác định tốc độ thay đổi khi hiệu ứng di chuyển.

Các giá trị có sẵn như sau:

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: tạo hiệu ứng chuyển đổi từ lúc bắt đầu với lúc kết thúc tốc độ là như nhau.
ease-in: tạo hiệu ứng chuyển đổi chậm lúc bắt đầu.
ease-out: tạo hiệu ứng chuyển đổi chậm lúc kết thúc.
ease-in-out: tạo hiệu ứng chuyển đổi chậm cả lúc bắt đầu và kết thúc.
cubic-bezier(n,n,n,n): cho phép bạn xác định một giá trị của riêng mình theo hàm bezier (Quantrimang.com sẽ giới thiệu ở một bài riêng sau nhé).

/* Code animation */
@keyframes example {
  from {background-color: pink;}
  to {background-color: purple;}
}

/* Áp dụng animation vào phần tử */
div {
  width: 100px;
  height: 100px;
  background-color: purple;
  animation-name: example;
  animation-duration: 4s;
}

5

Bạn tự chạy theo code sau để thấy rõ sự khác nhau nhé:

/* Code animation */
@keyframes example {
  from {background-color: pink;}
  to {background-color: purple;}
}

/* Áp dụng animation vào phần tử */
div {
  width: 100px;
  height: 100px;
  background-color: purple;
  animation-name: example;
  animation-duration: 4s;
}

6

Thuộc tính animation-fill-mode

Animation CSS không gây ảnh hưởng đến phần tử trước khi chạy keyframe đầu tiên và sau khi keyframe 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 Animation.

Các giá trị có sẵn như sau:

none: khi animation không hoạt động thì nó sẽ giữ nguyên trạng thái bất động của phần tử, không thêm một style nào vào thành phần (mặc định).
forwards: khi animation không hoạt động sau khi kết thúc animation, giá trị này sẽ apply các thuộc tính của lần cuối cùng xuất hiện trong keyframe vào trạng thái của phần tử (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 keyfame vào trạng thái của phần tử (phụ thuộc vào thuộc tính anmation-direction).
both: kết hợp cả forwards và backwards cho trạng thái phần tử.

/* Code animation */
@keyframes example {
  from {background-color: pink;}
  to {background-color: purple;}
}

/* Áp dụng animation vào phần tử */
div {
  width: 100px;
  height: 100px;
  background-color: purple;
  animation-name: example;
  animation-duration: 4s;
}

7

Bạn thử tự demo để xem rõ sự khác biệt nhé, code đầy đủ đây:

/* Code animation */
@keyframes example {
  from {background-color: pink;}
  to {background-color: purple;}
}

/* Áp dụng animation vào phần tử */
div {
  width: 100px;
  height: 100px;
  background-color: purple;
  animation-name: example;
  animation-duration: 4s;
}

8

Gộp chung các thuộc tính

Ta có một animation khai báo đầy đủ 6 thuộc tính như sau:

/* Code animation */
@keyframes example {
  from {background-color: pink;}
  to {background-color: purple;}
}

/* Áp dụng animation vào phần tử */
div {
  width: 100px;
  height: 100px;
  background-color: purple;
  animation-name: example;
  animation-duration: 4s;
}

9

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.

Cú pháp sử dụng như sau (chú ý thứ tự khai báo):

/* Code animation */
@keyframes example {
  0% {background-color: crimson;}
  25% {background-color: lightsalmon;}
  50% {background-color: pink;}
  100% {background-color: indigo;}
}

/* Áp dụng animation vào phần tử */
div {
  width: 100px;
  height: 100px;
  background-color: crimson;
  animation-name: example;
  animation-duration: 4s;
}

0

Vậy ví dụ trên có thể được khai báo ngắn gọn trong 1 dòng như sau:

/* Code animation */
@keyframes example {
  0% {background-color: crimson;}
  25% {background-color: lightsalmon;}
  50% {background-color: pink;}
  100% {background-color: indigo;}
}

/* Áp dụng animation vào phần tử */
div {
  width: 100px;
  height: 100px;
  background-color: crimson;
  animation-name: example;
  animation-duration: 4s;
}

1

Bài trước: Hiệu ứng chuyển đổi Transition trong CSS

Bài tiếp: Hiệu ứng Tooltip trong CSS

Cách nhập và xuất hàm trong JavaScript
Hiệu ứng Tooltip trong CSS

Thứ Sáu, 17/05/2019 17:12

3,9 ★ 13 👨 46.425

#CSS

0 Bình luận

Sắp xếp theo

Xóa Đăng nhập để Gửi

Bạn nên đọc

Sony ra mắt hai mẫu máy chiếu mới
Qualcomm sắp có bộ vi xử lý đồ họa di động mới
Các tùy chọn bảo mật SD-WAN
Tạo USB Recovery trong Windows 8.1
Truy cập và điều khiển hệ thống từ xa với GoToAssist
Xu hướng công nghệ TV cho năm 2011

CSS và CSS3

TOP code CSS xếp hạng sao (Star Rating) đẹp cho website

Xem thêm

CSS và CSS3

CSS cơ bản
- Giới thiệu CSS
- Cú pháp và Selector CSS
- Vị trí đặt CSS
- CSS - Color
- CSS - Background
- CSS - Border
- CSS - Margin
- CSS - Padding
- CSS - Width và Height
- CSS - Box Model
- CSS - Outline
- CSS - Text
- CSS - Font
- CSS - Icon
- CSS - Link
- CSS - Tạo List
- CSS - Table
- CSS - Display
- CSS - Max-width
- CSS - Position
- CSS - Overflow
- CSS - Float và Clear
- CSS - Inline-block
- CSS - Align
- CSS - Combinator
- CSS - Pseudo-Class
- CSS - Pseudo-Element
- CSS - Opacity
- CSS - Navigation Bar
- CSS - Dropdown
- CSS - Image Gallery
- CSS - Image Sprite
- CSS - Attribute Selector
- CSS - Form
- CSS - Counter
- CSS - Layout
- CSS - Unit
- CSS - Specificity
CSS nâng cao
- CSS - Rounded Corner
- CSS - Border Image
- CSS - Multiple Background
- CSS - Color
- CSS - Gradient
- CSS - Shadow Effect
- CSS - Text Effect
- CSS - Web Font
- CSS - 2D Transform
- CSS - 3D Transform
- CSS - Transition
- CSS - Animation
- CSS - Tooltip
- CSS - Flexbox
- CSS - Button
- CSS- @media
- Tạo hiệu ứng hover nút bằng CSS

Công nghệ
- Ứng dụng
- Hệ thống
- Game - Trò chơi
- iPhone
- Android
- Linux
- Nền tảng Web
- Đồng hồ thông minh
- Chụp ảnh - Quay phim
- macOS
- Phần cứng
- Thủ thuật SEO
- Kiến thức cơ bản
- Raspberry Pi
- Dịch vụ ngân hàng
- Lập trình
- Dịch vụ công trực tuyến
- Dịch vụ nhà mạng
- Nhà thông minh
Download
- Ứng dụng văn phòng
- Tải game
- Tiện ích hệ thống
- Ảnh, đồ họa
- Internet
- Bảo mật, Antivirus
- Họp, học trực tuyến
- Video, phim, nhạc
- Mail
- Lưu trữ đám mây
- Giao tiếp, liên lạc, hẹn hò
- Hỗ trợ học tập
- Máy ảo
Tiện ích
Khoa học
- Khoa học vui
- Khám phá khoa học
- Bí ẩn - Chuyện lạ
- Chăm sóc Sức khỏe
- Khoa học Vũ trụ
- Khám phá thiên nhiên
Điện máy
- Tủ lạnh
- Tivi
- Điều hòa
- Máy giặt
Cuộc sống
- Kỹ năng
- Món ngon mỗi ngày
- Làm đẹp
- Nuôi dạy con
- Chăm sóc Nhà cửa
- Kinh nghiệm Du lịch
- Halloween
- Mẹo vặt
- Giáng sinh - Noel
- Tết 2023
- Quà tặng
- Giải trí
- Là gì?
- Nhà đẹp
- TOP
- Phong thủy
Video
- Công nghệ
- Cisco Lab
- Microsoft Lab
- Video Khoa học
Ô tô, Xe máy
- Giấy phép lái xe
Làng Công nghệ
- Tấn công mạng
- Chuyện công nghệ
- Công nghệ mới
- Trí tuệ nhân tạo (AI)
- Anh tài công nghệ
- Bình luận công nghệ
- Tổng hợp
Học CNTT
- Quiz công nghệ
- Microsoft Word 2016
- Microsoft Word 2013
- Microsoft Word 2007
- Microsoft Excel 2019
- Microsoft Excel 2016
- Hàm Excel
- Microsoft PowerPoint 2019
- Microsoft PowerPoint 2016
- Google Sheets - Trang tính
- Code mẫu
- Photoshop CS6
- Photoshop CS5
- HTML
- CSS và CSS3
- Python
- Học SQL
- Lập trình C
- Lập trình C++
- Lập trình C#
- Học HTTP
- Bootstrap
- SQL Server
- JavaScript
- Học PHP
- jQuery
- Học MongoDB
- Unix/Linux
- Học Git
- NodeJS

Giấy phép số 362/GP-BTTTT. Bộ Thông tin và Truyền thông cấp ngày 30/06/2016. Cơ quan chủ quản: CÔNG TY CỔ PHẦN MẠNG TRỰC TUYẾN META. Địa chỉ: 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại: 024 2242 6188. Email: [email protected]. Chịu trách nhiệm nội dung: Lê Ngọc Lam.

programming css

Hướng dẫn học css animation

Qui tắc @keyframes trong CSS

Ví dụ của qui tắc @keyframes với Left Animation

Tạo Logo

CSS Animation là gì?

Quy tắc Keyframe

Thuộc tính animation-delay

Thuộc tính animation-iteration-count

Thuộc tính animation-direction

Thuộc tính animation-timing-function

Thuộc tính animation-fill-mode

Gộp chung các thuộc tính

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội