[CSS] Tạo hiệu ứng bằng Animation trong CSS3

Đăng bởi: Admin | Lượt xem: 2791 | Chuyên mục: CSS3

Animation trong CSS3 cho phép chúng ta tạo ra các hiệu ứng chuyển động mà không cần phải sử dụng Javascript hay Flash. Animation giúp Website chúng ta trở nên chuyên nghiệp mà bắt mắt với người dùng hơn. Trong bài viết này vncoder.vn sẽ giới thiệu đến các bạn 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.

1. Hiệu ứng

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

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

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

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

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

Cú pháp

animation-delay: value;

Xem Demo

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

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

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

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

animation-platy-state: value;

Xem Demo

2. Kết luận

Trên đây là toàn bộ 9 hiệu ứng chuyển động thẳng và quay vòng trong bằng Animation trong CSS3 mà vncoder.vn đã giới thiệu đến các bạn. Hy vọng bài viết sẽ giúp ích cho bạn. chúc bạn thành công.