Hướng dẫn học css 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 ------------------------------------------------------- 

@keyframes Name { 
 /*code*/
}

/* 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;
}

/* 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;
}

div {
 width: 100px;
 height: 100px;
 background-color: Crimson;
 -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
 -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
 animation-name: example;
 animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
 0% {background-color: Crimson;}
 25% {background-color: LightSalmon;}
 50% {background-color: pink;}
 100% {background-color: purple;}
}

/* Cú pháp tiêu chuẩn */
@keyframes example {
 0% {background-color: Crimson;}
 25% {background-color: LightSalmon;}
 50% {background-color: pink;}
 100% {background-color: indigo;}
}

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 đủ:

div {
 width: 100px;
 height: 100px;
 background-color: crimson;
 position: relative;
 -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
 -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
 animation-name: example;
 animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
 0% {background-color:crimson; left:0px; top:0px;}
 25% {background-color:lightsalmon; left:200px; top:0px;}
 50% {background-color:seagreen; left:200px; top:200px;}
 75% {background-color:midnightblue; left:0px; top:200px;}
 100% {background-color:indigo; left:0px; top:0px;}
}

/* Cú pháp tiêu chuẩn */
@keyframes example {
 0% {background-color:crimson; left:0px; top:0px;}
 25% {background-color:lightsalmon; left:200px; top:0px;}
 50% {background-color:seagreen; left:200px; top:200px;}
 75% {background-color:midnightblue; left:0px; top:200px;}
 100% {background-color:indigo; left:0px; top:0px;}
}

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 đủ:

div {
 width: 100px;
 height: 100px;
 background-color: crimson;
 position: relative;
 -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
 -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
 -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
 animation-name: example;
 animation-duration: 4s;
 animation-delay: 1s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
 0% {background-color:crimson; left:0px; top:0px;}
 25% {background-color:lightsalmon; left:200px; top:0px;}
 50% {background-color:seagreen; left:200px; top:200px;}
 75% {background-color:midnightblue; left:0px; top:200px;}
 100% {background-color:indigo; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
 0% {background-color:crimson; left:0px; top:0px;}
 25% {background-color:lightsalmon; left:200px; top:0px;}
 50% {background-color:seagreen; left:200px; top:200px;}
 75% {background-color:midnightblue; left:0px; top:200px;}
 100% {background-color:indigo; left:0px; top:0px;}
}

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ứ Sá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ới thiệu | Điều khoản | Bảo mật | Hướng dẫn | Ứng dụng | Liên hệ | Quảng cáo | Facebook | Youtube | DMCA

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.

Bản quyền © 2003-2023 QuanTriMang.com. Giữ toàn quyền. Không được sao chép hoặc sử dụng hoặc phát hành lại bất kỳ nội dung nào thuộc QuanTriMang.com khi chưa được phép.

Chúng tôi

• Giới thiệu
• Liên hệ
• Tuyển dụng
• Quảng cáo

Điều khoản

• Điều khoản hoạt động
• Điều kiện tham gia
• Quy định cookie

Trợ giúp

• Hướng dẫn
• Loại bỏ câu hỏi
• Liên hệ

Mạng xã hội

• Facebook
• Twitter
• LinkedIn
• Instagram

---

Bản quyền © 2021 Học Tốt Inc.