Hướng dẫn css animation shorthand - tốc ký hoạt hình css

Question

Trang chủ
Tham khảo
CSS
CSS3
Thuộc tính animation

Nội dung chính Show

Định nghĩa và sử dụng
Cấu trúc
Thuộc tính của animation trong css3:
6. animation-iteration-count: thiết lập số lần thực hiện một animation.
2. animation-name tác dụng xác định thành phần sẽ thực thi animation nào.
3. animation-duration :thiết lập khoảng thời gian thực thị 1 chuyển động animation
3. animation-duration :thiết lập khoảng thời gian thực thị 1 chuyển động animation
3. animation-duration :thiết lập khoảng thời gian thực thị 1 chuyển động animation
3. animation-duration :thiết lập khoảng thời gian thực thị 1 chuyển động animation
3. animation-duration :thiết lập khoảng thời gian thực thị 1 chuyển động animation
3. animation-duration :thiết lập khoảng thời gian thực thị 1 chuyển động animation
3. animation-duration :thiết lập khoảng thời gian thực thị 1 chuyển động animation

Định nghĩa và sử dụng

Thuộc tính animation xác định một chuyển động của một tag hay một hình ảnh, là sự tổng hợp của các thuộc tính: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction.

Cấu trúc

tag {
    animation: giá trị;
    -moz-animation: giá trị;
    -webkit-animation: giá trị;
    -o-animation: giá trị;
}

Trong đó:

-moz-animation hỗ trợ cho firefox.
-webkit-animation hỗ trợ cho Google Chrome và Safari.
-o-animation hỗ trợ cho Opera.

Thuộc tính của animation trong css3:

Thuộc tính	giá trị	Ví dụ	Mô tả
animation-name	tên animation	animation-name: myAnimation;	Xác định tên cho một animation.
animation-duration	thời gian	animation-duration: 5s;	Xác định thời gian để hoàn thành một chuyển động, mặc định là 0s.
animation-timing-function	linear	animation-timing-function: linear;	Chuyển động sẽ cùng tốc độ từ lúc bắt đầu tới lúc kết thúc.
ease	animation-timing-function: ease;	Chuyển động ban đầu sẽ chậm, sau đó nhanh, đến lúc kết thúc sẽ từ từ, đây là dạng mặc định.
ease-in	animation-timing-function: ease-in;	Chuyển động ban đầu sẽ chậm, sau đó nhanh dần.
ease-out	animation-timing-function: ease-out;	Chuyển động ban đầu sẽ nhanh, sau đó sẽ chậm dần.
ease-in-out	animation-timing-function: ease-in-out;	Chuyển động ban đầu chậm, sau đó nhanh, đến lúc kết thúc sẽ chậm dần.
cubic-bezier(n,n,n,n)	animation-timing-function: cubic-bezier(1,1,1,0);	Xác định giá trị riêng cho chuyển động, giá trị sẽ từ 0 tới 1.
animation-delay	thời gian	animation-duration: 5s;	Xác định thời gian để hoàn thành một chuyển động, mặc định là 0s.
animation-timing-function	linear	animation-timing-function: linear;	Chuyển động sẽ cùng tốc độ từ lúc bắt đầu tới lúc kết thúc.
ease	animation-timing-function: ease;	Chuyển động ban đầu sẽ chậm, sau đó nhanh, đến lúc kết thúc sẽ từ từ, đây là dạng mặc định.
ease-in	animation-timing-function: ease-in;	Chuyển động ban đầu sẽ chậm, sau đó nhanh dần.	ease-out
animation-timing-function: ease-out;	Chuyển động ban đầu sẽ nhanh, sau đó sẽ chậm dần.	ease-in-out
animation-timing-function: ease-in-out;	Chuyển động ban đầu chậm, sau đó nhanh, đến lúc kết thúc sẽ chậm dần.	cubic-bezier(n,n,n,n)	animation-timing-function: cubic-bezier(1,1,1,0);
Xác định giá trị riêng cho chuyển động, giá trị sẽ từ 0 tới 1.	animation-delay	animation-delay: 3s;
Xác định sau bao lâu thì chuyển động sẽ bắt đầu, mặc định sẽ là 0	animation-iteration-count	số tự nhiên	animation-iteration-count: 4;

Xác định số lần thực hiện chuyển động.

<html>
<head></head>
<body>
<p>Animation</p>
</body>
</html>

infinite

p {
    border: 1px solid red;
    text-align: center;
    width: 100px;
}

animation-iteration-count: infinite;

infinite

p {
    border: 1px solid red;
    text-align: center;
    width: 100px;
    position: relative;
    animation: myAnimation 5s ease-out infinite;
    -moz-animation: myAnimation 5s ease-out infinite;
    -webkit-animation: myAnimation 5s ease-out infinite;
    -o-animation: myAnimation 5s ease-out infinite;
}

@keyframes myAnimation {
    from {left: 0px;}
    to {left: 200px;}
}

/* Hien thi cho Firefox */
@-moz-keyframes myAnimation {
    from {left: 0px;}
    to {left: 200px;}
}

/* Hien thi cho Safari and Chrome */
@-webkit-keyframes myAnimation {
    from {left: 0px;}
    to {left: 200px;}
}

/* Hien thi cho Opera */
@-o-keyframes myAnimation {
    from {left: 0px;}
    to {left: 200px;}
}

animation-iteration-count: infinite;

4. animation-timing-function : xác định tốc độ chuyển động của một animation sẽ như thế nào. 2 phút đọc

Cú Pháp:

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

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

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 đó : Name chính là tên của thuộc tính @keyframes

.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

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

Trong đó: time là có thể tính bằng s hoặc ms.

animation-timing-function: value;

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-delay: value;

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

<html>
<head></head>
<body>
<p>Animation</p>
</body>
</html>

0

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

<html>
<head></head>
<body>
<p>Animation</p>
</body>
</html>

1

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

<html>
<head></head>
<body>
<p>Animation</p>
</body>
</html>

2

Xem Demo

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

<html>
<head></head>
<body>
<p>Animation</p>
</body>
</html>

3

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 .