Mã html hoạt hình văn bản

Để tạo hiệu ứng chữ nhấp nháy thì chúng ta có thể sử dụng jQuery hoặc CSS trong bài viết này mình sẽ hướng dẫn các bạn cách sử dụng thuộc tính @keyframes của CSS để tạo ra hiệu ứng chữ nhấp nháy

Để tạo chữ nhấp nháy, bạn sử dụng mã css sau

@-webkit-keyframes my {
0% { color: #F8CD0A; }
50% { color: #fff; }
100% { color: #F8CD0A; }
}
@-moz-keyframes my {
0% { color: #F8CD0A; }
50% { color: #fff; }
100% { color: #F8CD0A; }
}
@-o-keyframes my {
0% { color: #F8CD0A; }
50% { color: #fff; }
100% { color: #F8CD0A; }
}
@keyframes my {
0% { color: #F8CD0A; }
50% { color: #fff; }
100% { color: #F8CD0A; }
}
.text-animation {
background:#3d3d3d;
font-size:24px;
font-weight:bold;
-webkit-animation: my 700ms infinite;
-moz-animation: my 700ms infinite;
-o-animation: my 700ms infinite;
animation: my 700ms infinite;
}

• @keyframes có nhiệm vụ điều khiển diễn biến một hoạt động của một phần thành phần, và cụ thể chính là điều khiển phần màu mè của “Chữ nhấp nháy”
• Hoạt hình có nhiệm vụ làm cho “chữ nhấp nháy” nhấp nháy

Ghi chú. Trong đoạn css trên bạn chỉ cần chú ý 2 thuộc tính @keyframes và hoạt hình và.
-moz-Support for firefox.
-webkit-Support for Google Chrome and Safari.

Cách sử dụng

 Chữ nhấp nháy

Giải thích về mã

@keyframes my { 
0% { color: #F8CD0A; } 
50% { color: #fff; } 
100% { color: #F8CD0A; }
 }

của tôi. là tên của thuộc tính mình đặt, thuộc tính này được hoạt hình sử dụng

0%,50%,100%. là thuộc tính css cho từng giai đoạn, ở đây mình dùng thuộc tính color để đổi 2 màu trắng và cam thay đổi cho nhau

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

Và trong lớp "text-animation" bạn chọn thuộc tính chữ hoạt hình trong lớp chuyển động theo ý bạn

của tôi. là tên hoạt hình, và trong trường hợp này, phát sáng chính là tên thuộc tính mình đặt trên khung hình chính

Trong bài viết này, mình muốn cung cấp những phần quan trọng nhất để bạn có thể tạo hiệu ứng thú vị với CSS Animation

Design design with CSS Animation

Mình cũng làm một ví dụ nhỏ ở cuối bài viết này để các bạn có thể tham khảo

lục mục

1. Các thuộc tính Animation

2. Tìm hiểu về Keyframes

3. Tạo CSS Animation

4. Ví dụ CSS Animation thực tế

1. Các thuộc tính Animation

Việc thiết lập hoạt ảnh được thực hiện bằng cách gán thuộc tính hoạt ảnh trong khi viết css cho phần tử hoặc thuộc tính phụ của nó

Để bắt đầu tạo ra các hiệu ứng chuyển động thú vị với CSS Animation, bạn phải biết cách thiết lập thời lượng [thời lượng], thời gian [thời gian], tốc độ [độ trễ] và một số thứ khác

Để làm quen với các thuộc tính này và hiểu chúng có thể làm được gì, hãy cùng xem chi tiết bên dưới đây

Thuộc tính #1.

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

7 - Xác định thời gian cho một chu kỳ chuyển động, thường được đặt thành

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

8 hoặc

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

9

Ví dụ. Chúng ta muốn thiết lập chu kỳ chuyển động là 4s, vậy thì chúng ta sẽ thiết lập như sau.

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

0

Thuộc tính #2.

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

1 - Xác định khoảng thời gian giữa thời điểm tải xong phần tử và bắt đầu chu kỳ chuyển động đầu tiên, nó cũng được đặt là

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

8 hoặc

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

9

Ví dụ. Chúng ta muốn sau khi tải xong phần tử thì đợi 2 giây sau mới bắt đầu chu kỳ chuyển động đầu tiên.

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

4

Thuộc tính #3.

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

0 - Xác định có bao nhiêu chu kỳ chuyển động sẽ được lặp lại, nó có thể được đặt thành

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

1 nếu bạn muốn nó lặp lại mãi mãi

Ví dụ. Chúng ta muốn lặp lại chuyển động 3 lần.

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

2

Thuộc tính #4.

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

3 - Xác định xem chuyển động sẽ thay đổi hướng hoặc bắt đầu ở cùng một nơi mỗi lần sau khi đặt lại

It is could not be set as a in the following words

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  4 [default]. Chuyển động tiến về phía trước được bắt đầu từ 

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  5 đến

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6 trong một chu kỳ

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  7. Chuyển động bắt đầu từ

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  5 đến

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6 và chu kỳ tiếp theo là từ

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6 đến

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  5

• .text-animation{ 
  background:#3d3d3d; 
  font-size:24px; 
  font-weight:bold; 
  -webkit-animation: my 700ms infinite; 
  -moz-animation: my 700ms infinite; 
  -o-animation: my 700ms infinite; 
  animation: my 700ms infinite; 
  }

  72. Chuyển theo hướng ngược lại, từ

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6 đến

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  5

• .text-animation{ 
  background:#3d3d3d; 
  font-size:24px; 
  font-weight:bold; 
  -webkit-animation: my 700ms infinite; 
  -moz-animation: my 700ms infinite; 
  -o-animation: my 700ms infinite; 
  animation: my 700ms infinite; 
  }

  75. Chuyển động chu kỳ đầu tiên được phát từ

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6 đến

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  5 và chu kỳ thứ hai sẽ được phát từ

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  5 đến

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6

Thuộc tính #5.

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

80 - Xác định tên của

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

81

Những thuộc tính ở bên trên mà mình mô tả ở trên là phổ biến nhất và được sử dụng thường xuyên nhất

Nhưng cũng có một vài thuộc tính ít phổ biến hơn cũng được sử dụng để thiết lập chuyển động

Cùng lướt qua một chút nhé

Thuộc tính #6.

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

82 -Xác định thời gian của các chuyển động, có nghĩa là thiết lập đường cong gia tốc để xác định chuyển động qua các khung hình chính

• .text-animation{ 
  background:#3d3d3d; 
  font-size:24px; 
  font-weight:bold; 
  -webkit-animation: my 700ms infinite; 
  -moz-animation: my 700ms infinite; 
  -o-animation: my 700ms infinite; 
  animation: my 700ms infinite; 
  }

  83 - Chỉ định chuyển động với khởi động chậm, sau đó nhanh, sau đó kết thúc chậm [ở đây là mặc định]

• .text-animation{ 
  background:#3d3d3d; 
  font-size:24px; 
  font-weight:bold; 
  -webkit-animation: my 700ms infinite; 
  -moz-animation: my 700ms infinite; 
  -o-animation: my 700ms infinite; 
  animation: my 700ms infinite; 
  }

  84 - Chỉ định chuyển đổi có cùng tốc độ từ đầu đến cuối

• .text-animation{ 
  background:#3d3d3d; 
  font-size:24px; 
  font-weight:bold; 
  -webkit-animation: my 700ms infinite; 
  -moz-animation: my 700ms infinite; 
  -o-animation: my 700ms infinite; 
  animation: my 700ms infinite; 
  }

  85 - Chỉ định chuyển động chậm lúc đầu

• .text-animation{ 
  background:#3d3d3d; 
  font-size:24px; 
  font-weight:bold; 
  -webkit-animation: my 700ms infinite; 
  -moz-animation: my 700ms infinite; 
  -o-animation: my 700ms infinite; 
  animation: my 700ms infinite; 
  }

  86 - Chỉ định chuyển động chậm về cuối

• .text-animation{ 
  background:#3d3d3d; 
  font-size:24px; 
  font-weight:bold; 
  -webkit-animation: my 700ms infinite; 
  -moz-animation: my 700ms infinite; 
  -o-animation: my 700ms infinite; 
  animation: my 700ms infinite; 
  }

  87 - Chỉ định chuyển động với bắt đầu và kết thúc chậm

• .text-animation{ 
  background:#3d3d3d; 
  font-size:24px; 
  font-weight:bold; 
  -webkit-animation: my 700ms infinite; 
  -moz-animation: my 700ms infinite; 
  -o-animation: my 700ms infinite; 
  animation: my 700ms infinite; 
  }

  88 - Cho phép bạn xác định các giá trị của riêng mình trong một hàm

  .text-animation{ 
  background:#3d3d3d; 
  font-size:24px; 
  font-weight:bold; 
  -webkit-animation: my 700ms infinite; 
  -moz-animation: my 700ms infinite; 
  -o-animation: my 700ms infinite; 
  animation: my 700ms infinite; 
  }

  89

Thuộc tính #7.

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

90 - Xác định các giá trị được áp dụng cho phần tử trước khi chuyển động và sau khi nó được thực thi

Thuộc tính #8.

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

91 - Cho phép tạm dừng và khởi động lại chuỗi chuyển động

Vâng,

Bây giờ bạn đã biết các thuộc tính CSS Animation để làm gì, vì thế chúng ta có thể chuyển sang bước tiếp theo, đó là

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

81

2. Tìm hiểu về Keyframe

Để xác định hành động tùy chỉnh cho phần tử, bạn phải thiết lập một chuỗi hành động

Lúc này, bạn sẽ sử dụng quy tắc

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

81

Trong @keyframe, chúng tôi chỉ định kiểu cho phần tử trong thời gian xuất cụ thể

Chúng ta đang xác định kiểu ít nhất hai bước

• and

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6, is the end of the status

We can also change

Tất nhiên, vì có nhiều khả năng nên bạn sẽ xác định nhiều hơn hai bước, vì vậy chúng tôi sử dụng Tỷ lệ phần trăm để xác định kiểu cho từng phần của chu kỳ chuyển động

Chúng ta hãy xem ví dụ về @keyframe, trong đó chúng ta sẽ xác định một keyframe để thay đổi chiều cao của phần tử

@keyframes my { 
0% { color: #F8CD0A; } 
50% { color: #fff; } 
100% { color: #F8CD0A; }
 }

3

Vì vậy, trong ví dụ trên, chúng tôi đã tạo ra một khung hình chính được gọi là

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

95

Nó thay đổi chiều cao của phần tử từ

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

96, đến giữa chu kỳ thì tăng lên đến

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

97. Sau đó tiếp tục tăng đến

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

98 khi hết chu kỳ

mẹo. Thay vì chiều cao thay đổi [

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

99], bạn có thể sử dụng thuộc tính

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

00. Vừa mượt mà hơn vừa phải hiệu quả tốt hơn

Trong bước tiếp theo, chúng tôi sẽ thêm chuyển động này vào phần tử HTML để bạn thấy cách nó hoạt động

3. Tạo CSS Animation

Chúng ta có thể tạo một hình ảnh động bằng cách sử dụng viết tắt hoặc gán giá trị cho từng thuộc tính

To set it into a line, các thuộc tính sẽ được sắp xếp lần lượt như sau

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

01.

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

80,

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

7,

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

82,

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

1,

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

0,

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

3,

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

90,

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

91 ;

Nếu bạn là người mới bắt đầu tìm hiểu về CSS và CSS Animation, xin giới thiệu bạn gán giá trị riêng cho từng thuộc tính để dễ dàng nắm bắt

Ghi chú. Như ví dụ bên dưới

Ngoài ra, điều đáng ghi nhớ là 

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

7 phải được thiết lập để làm cho hoạt hình hoạt động

Nếu bạn không thiết lập

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

7, thì bạn sẽ không thấy hiệu ứng gì cả

Bây giờ, hãy thử thiết lập hoạt hình cho phần tử, như sau

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Trong đoạn mã trên, chúng ta chỉ định một

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

01 cho phần tử

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

13

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  14 có nghĩa là phần tử sẽ chuyển động theo keyframe grow [mà ta đã định nghĩa ở trên]

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  15 có nghĩa là chuyển động sẽ kéo dài

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  16 trên mỗi chu kỳ

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  4 có nghĩa là chuyển động sẽ bắt đầu sau 2 giây kể từ khi tải xong phần tử

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  18 có nghĩa là chuyển động sẽ lặp lại vô hạn

Thiết lập một hình ảnh động cũng rất dễ thôi phải không?

4. Ví dụ CSS Animation thực tế

Trong các bước trên, bạn đã học cách nào để thiết lập hiệu ứng chuyển động hiệu ứng

Tại đây, hãy vận dụng nó để tạo ra một ví dụ thú vị nhé

Chúng ta sẽ tạo ra một hiệu ứng đang tải

Có rất nhiều cách để tạo hiệu ứng tải ứng dụng bằng hoạt hình

Như ví dụ bên dưới, chúng ta sẽ tạo ra 4 hình vuông và thay đổi chiều cao của chúng để tạo ra hiệu ứng sóng

Please get center into the property

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

1 to see the angle's bắt đầu chuyển động theo thứ tự từ trái sang phải để tạo ra hiệu ứng chuyển tiếp

Bạn cần nhớ,

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

1 quyết định sẽ đợi bao lâu [sau khi tải xong] để bắt đầu hoạt ảnh hiệu ứng

Xin hãy nhìn vào ví dụ bên dưới để xem cách nó hoạt động thực sự

Lưu ý. You must be to Codepen. io to pass CAPTCHA before. Sau đó quay lại F5 bài viết để xem ví dụ minh họa

Xem Pen Ví dụ CSS Animation của NIIT -ICT Hà Nội [@niiticthanoi] trên CodePen

Lưu ý #1. Để xem được mã bạn phải mở tab khác vào codepen. io và tải lại bài viết này

Lưu ý #2. Mình đã thêm thuộc tính

.text-animation{ 
background:#3d3d3d; 
font-size:24px; 
font-weight:bold; 
-webkit-animation: my 700ms infinite; 
-moz-animation: my 700ms infinite; 
-o-animation: my 700ms infinite; 
animation: my 700ms infinite; 
}

81 để đảo ngược chuyển động từ

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

6

There's mean is

• Sau khi thay đổi kích thước từ

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  5 đến

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6 thì

• Chu kỳ tiếp theo nó sẽ giảm từ

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6 đến

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  5

• Chu kỳ sau là từ

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  5 đến

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6

Nếu bạn không thiết lập thuộc tính

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

3 thì sau khi thay đổi kích thước thành

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

6 thì nó sẽ quay lại ngay kích thước

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

5

Điều này làm cho hiệu ứng không được mượt mà cho lắm

Chúc mừng bạn đã biết sử dụng CSS Animation

Trong bài viết này, chúng ta đã cùng nhau tìm hiểu về những thuộc tính quan trọng nhất của CSS Animation

Đây là phần mình thấy thú vị nhất trong Front end setting

Mình đã giải thích chi tiết từng thuộc tính CSS Animation có thể làm được gì, keyframe hoạt động ra sao và giúp mình thiết lập một CSS Animation thực thế.

Mình hy vọng bạn sẽ thấy bài viết này hữu ích và sẽ sử dụng nó như là bước đầu tiên để xây dựng các hiệu ứng thú vị của riêng mình.

Còn nếu như bạn đã biết nhiều về CSS Animation, hãy chia sẻ những suy nghĩ của bạn về chúng trong phần bình luận để cùng thảo luận nhé.

---

HỌC VIỆN ĐẠO TẠO CNTT NIIT - ICT HÀ NỘI

Học lập trình chất lượng cao [Từ năm 2002]. Học thực tế + Tuyển dụng ngay

Đc. Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội

SĐT. 02435574074 - 0968051561
Email. xin chào@niithanoi. giáo dục. vn

trang chủ. https. //Facebook. com/NIIT. CNTT-TT/

#niit #niithanoi niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python