Animation trong CSS

Animation trong CSS

Rate this post

Thuộc tính animation trong CSS có thể được sử dụng để tạo animation cho nhiều thuộc tính CSS khác như màu sắc, màu nền, chiều cao hoặc chiều rộng.

Mỗi animation cần được xác định với quy tắc @keyframes at-rule sau đó được gọi với thuộc tính animation, như sau:

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

Mỗi @keyframes at-rule xác định điều gì sẽ xảy ra tại các thời điểm cụ thể trong animation. Ví dụ: 0% là phần đầu của animation và 100% là phần cuối.

Các bài viết liên quan:

Sau đó, các khung hình chính này có thể được điều khiển bởi thuộc tính animation tốc ký hoặc tám thuộc tính phụ của nó, để cung cấp nhiều quyền kiểm soát hơn đối với cách thao tác các khung hình chính đó.

See the Pen A simple animation by CSS-Tricks (@css-tricks) on CodePen.

Sub-properties

  • animation-name: khai báo tên của @keyframes at-rule để thao tác.
  • thời lượng animation: khoảng thời gian cần để animation hoàn thành một chu kỳ.
  • animation-timing-function: thiết lập các đường cong gia tốc đặt trước chẳng hạn như dễ dàng hoặc tuyến tính.
  • animation-delay: thời gian giữa phần tử được tải và bắt đầu chuỗi animation (ví dụ thú vị).
  • animation-direction: đặt hướng của animation sau chu kỳ. Cài đặt lại mặc định của nó trên mỗi chu kỳ.
  • animation-iteration-count: số lần animation sẽ được thực hiện.
  • animation-fill-mode: đặt các giá trị được áp dụng trước / sau animation.

Ví dụ: bạn có thể đặt trạng thái cuối cùng của animation để duy trì trên màn hình hoặc bạn có thể đặt nó chuyển về trước khi animation bắt đầu.

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

See the Pen by CSS-Tricks (@css-tricks) on CodePen.

animation-play-state: tạm dừng / phát animation.

Sau đó, các thuộc tính phụ này có thể được sử dụng như sau:

Dưới đây là danh sách đầy đủ các giá trị mà mỗi thuộc tính phụ này có thể nhận:

Animation trong CSS

Nhiều bước

Nếu animation có cùng thuộc tính bắt đầu và kết thúc, sẽ hữu ích khi phân tách bằng dấu phẩy các giá trị 0% và 100% bên trong @keyframes:

@keyframes pulse {
  0%, 100% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }
}

Nhiều animation

Bạn cũng có thể phân tách các giá trị bằng dấu phẩy để khai báo nhiều animation trên một bộ chọn. Trong ví dụ dưới đây, chúng tôi muốn thay đổi màu của hình tròn trong @ khung hình chính đồng thời di chuyển nó từ bên này sang bên kia bằng một khung khác.

.element {
  animation: 
    pulse 3s ease infinite alternate, 
    nudge 5s linear infinite alternate;
}

Ví dụ về css multiple animation

.element {
  height: 400px;
  width: 400px;
  background-color: red;
  animation: 
    pulse 3s ease infinite alternate, 
    nudge 5s linear infinite alternate;
  border-radius: 100%;
}

@keyframes pulse {
  0%, 100% {
    background-color: red;
  }
  50% {
    background-color: orange;
  }
}

@keyframes nudge {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(150px, 0);
  }
  
  80% {
    transform: translate(-150px, 0);
  }
}


html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div id="element"></div>

Performance

Tạo animation cho hầu hết các thuộc tính là mối quan tâm về hiệu suất, vì vậy chúng ta nên tiến hành một cách thận trọng trước khi tạo animation cho bất kỳ thuộc tính nào. Tuy nhiên, có một số kết hợp nhất định có thể được tạo animation một cách an toàn:

  • transform: translate()
  • transform: scale()
  • transform: rotate()
  • opacity

Thuộc tính nào có thể được làm animation?

MDN có một danh sách các thuộc tính CSS có thể được làm động. Thuộc tính hoạt hình có xu hướng về màu sắc và số. Một ví dụ về thuộc tính không thể hoạt hình là hình nền.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Leave a Reply