Css hoạt hình trượt vô hạn

Thuộc tính animation trong CSS được sử dụng cho những hiệu ứng sinh động cho nhiều thuộc tính CSS khác như color,background-color,height hoặc width. Mỗi animation cần phải được xác định nghĩa bằng nguyên tắc

.ingredient {
 animation: infinite 5s pulse;
 }

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

Ví dụ hoạt hình thay đổi nền

HTML

<div class="element"></div>

CSS

.ingredient {
 animation: infinite 5s pulse;
 }

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

Thử nghiệm

Mỗi @keyframes luôn tạo ra những khoảnh khắc cụ thể trong quá trình diễn ra hiệu ứng. Ví dụ, 0% là khởi động của hiệu ứng và 100% là kết thúc. Sau đó, các khung hình chính này có thể được kiểm tra bằng cách tắt thuộc tính hoạt hình viết tắt hoặc 8 thuộc tính phụ,

#Sub-properties(thuộc tính chính)

• tên hoạt hình. tên của @keyframes
• Thời lượng hoạt ảnh. khoảng thời gian để hoạt hình thực hiện hết 1 chu kỳ
• hoạt hình-thời gian-chức năng. set up the lines of speed has been setting before as easy or linear
• chậm trễ hoạt hình. khoảng thời gian giữa các phần tử được tải và bắt đầu hoạt ảnh
• hướng hoạt hình. set direction of animation after Chu kỳ. Default of it resets on each Chu kỳ
• hoạt hình-lặp lại-đếm. số lần hoạt ảnh được thực hiện
• chế độ hoạt hình-điền. set value is used before / after after animation

Những thuộc tính phụ này được sử dụng như sau

HTML

<div class="element"></div>

CSS

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

Thử nghiệm

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

#Nhiều bước (nhiều bước)

Nếu hoạt ảnh có cùng tính chất bắt đầu và kết thúc, bạn nên chia các giá trị 0% và 100% bên trong @keyframes thành các dấu phẩy

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

#Multiple animations(nhiều animation cùng lúc)

Bạn có thể thông báo nhiều hoạt ảnh trong cùng một đối tượng (bộ chọn). Trong ví dụ dưới đây, tôi muốn thay đổi màu sắc của hình tròn trong @keyframe đồng thời để nó duy nhất chuyển từ trái sang phải

Ví dụ. Liên kết bản trình diễn

#Performance(hiệu suất)

Hầu hết các thuộc tính hoạt hình là mối liên quan về hiệu suất, vì vậy bạn nên cân nhắc cẩn thận với bất kỳ 1 thuộc tính hoạt hình nào. Tuy nhiên, có một số kết hợp nhất định có thể hoạt động 1 cách an toàn

• .ingredient {
   animation: infinite 5s pulse;
   }
  
  @keyframes pulse {
   0% {
   background color: # 001F3F;
   }
   100% {
   background color: # FF4136;
   }
   }

  3

• .ingredient {
   animation: infinite 5s pulse;
   }
  
  @keyframes pulse {
   0% {
   background color: # 001F3F;
   }
   100% {
   background color: # FF4136;
   }
   }

  4

• .ingredient {
   animation: infinite 5s pulse;
   }
  
  @keyframes pulse {
   0% {
   background color: # 001F3F;
   }
   100% {
   background color: # FF4136;
   }
   }

  5

• .ingredient {
   animation: infinite 5s pulse;
   }
  
  @keyframes pulse {
   0% {
   background color: # 001F3F;
   }
   100% {
   background color: # FF4136;
   }
   }

  6

#Những thuộc tính nào có thể thực hiện hiệu ứng hoạt hình?

CSS CSS CSS list may be created hiệu ứng. Thường có khả thi với màu sắc và kích thước. Unable to done effect with background-image

p {
    position: relative;
    width: 130px;
    animation: aniName 10s infinite;
    -moz-animation: aniName 10s infinite;
    -webkit-animation: aniName 10s infinite;
    -o-animation: aniName 10s infinite;
}

@keyframes aniName {
    0% { left: 0px; }
    50% { left: 80%; color: #cc0000; background: #cccccc; }
    100% { left: 0px; }
}

@-moz-keyframes aniName {
    0% { left: 0px; }
    50% { left: 80%; color: #cc0000; background: #cccccc; }
    100% { left: 0px; }
}

@-webkit-keyframes aniName {
    0% { left: 0px; }
    50% { left: 80%; color: #cc0000; background: #cccccc; }
    100% { left: 0px; }
}

@-o-keyframes aniName {
    0% { left: 0px; }
    50% { left: 80%; color: #cc0000; background: #cccccc; }
    100% { left: 0px; }
}