animation xác định một chuyển động của một tag hay một hình ảnh

Cú pháp animation xác định một chuyển đôngh của mooth tag hay một hình ảnh:
Tag{
position: relative;
animation: myAnimation 5s ease-out infinite;
}
@keyframes myAnimation {
from(hoặc % hoàn thành)  {left: ...px;}
to (hoặc % hoàn thành)  {left: ...px;}
}
Giải thích cấu trúc cú pháp: 
animation-name: tên @keyframes đã đặt;
animation-duration: số giây;
animation-direction: alternate; chạy ảnh động theo hướng quay đầy lượt đi , lượt về ngược lại.
animation-direction: reverse; chuyển động ngược lại code chuyền động (0% 25% 50% 75% 100%) nó sẽ chạy 100->75>50>25>0.
Lặp hành dộng theo :
chu kỳ giới hạn: animation-iteration-count: số lần;
chu kỳ vô hạn: animation-iteration-count:infinite;
............
Xác định đường tốc độ của Animation
Các animation-timing-function các hàm có sẵn quy đinh thời gian delay mặc định của thộc tính này.
Các giá trị hình ảnh động thời gian chức năng có thể có các giá trị sau:
ease - Xác định một hình ảnh động với một khởi đầu chậm chạp, sau đó nhanh chóng, sau đó kết thúc chậm (đây là mặc định)
linear - Xác định một hình ảnh động với tốc độ tương tự từ đầu đến cuối
ease-in - Xác định một hình ảnh động với một khởi đầu chậm chạp
ease-out - Xác định một hình ảnh động với một kết thúc chậm
ease-in-out - Xác định một hình ảnh động với một khởi đầu chậm chạp và kết thúc
cubic-bezier(n,n,n,n) - Cho phép bạn xác định các giá trị của riêng bạn trong một phương trình bậc ba-Bút chì
Ví dụ sau đây cho thấy một số các đường cong tốc độ khác nhau có thể được sử dụng:
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}