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

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

1. @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.

2. 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;
    }
}

Xem Demo

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

Cú Pháp

animation-duration: <time>#

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

Xem Demo

4. 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;

Xem Demo

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

Cú Pháp

animation-delay: value;

Xem Demo

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

Cú Pháp

animation-iteration-count: value;

Xem Demo

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;

Xem Demo

8. animation-fill-mode: xác định trạng thái của một animation, khi mà animation không được chạy (có thể là animation này đã chạy xong hoặc đang bị delay).

Cú Pháp

animation-fill-mode: value;

Xem Demo

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

animation-platy-state: value;

Xem Demo

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 .