Hướng dẫn left to right animation css - css hoạt ảnh trái sang phải

Vì câu hỏi này vẫn còn rất nhiều sự chú ý và không có Soulotions nào cung cấp câu trả lời đầy đủ mà tôi đang cố gắng đạt được, tôi sẽ đưa ra một ví dụ về cách tôi đã giải quyết nó vài năm trước.

Đầu tiên để làm cho hoạt hình từ trái sang phải, giống như nhiều câu hỏi khác đã cho thấy:

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 0;    
  }
}

<div id="pot">
  <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>  

Vấn đề chỉ với giải pháp này là khoai tây đi quá xa bên phải nên nó được đẩy ra khỏi chế độ xem trước khi quay lại. Như người dùng Taig đề xuất, chúng tôi có thể sử dụng giải pháp transform: translate, nhưng chúng tôi cũng có thể đặt 50% { left: calc(100% - potatoWidth); }

Thứ hai để làm cho hoạt hình từ trái sang phải, mà không bị đẩy ra khỏi chế độ xem:

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% { 
    left: calc(100% - 100px); 
   }
  100% {
    left: 0;     
  }
}

<div id="pot">
  <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>  

Và cuối cùng để làm cho khoai tây quay lại mà tôi cũng yêu cầu trong câu hỏi. Để làm điều đó, chúng ta cần thay đổi biến đổi xung quanh trục y.

Lưu ý rằng nếu chúng ta thực hiện nó chỉ ở mức 50%, nó sẽ từ từ quay lại cùng lúc nó đang di chuyển. Vì vậy, chúng ta cần chỉ định thời gian khoai tây nên ở -webkit-transform: rotateY(0deg);. Trong ví dụ này, khoai tây không biến cho đến khi nó 48% thành hình ảnh động, sau đó nó có thể biến khoảng từ 48% đến 50%.

Thứ ba để làm cho khoai tây quay lại ở mỗi góc để nó không di chuyển ngược:

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  48% {
    -webkit-transform: rotateY(0deg); 
  }
  50% { 
    left: calc(100% - 100px);
    -webkit-transform: rotateY(180deg); 
  }
  98% {
    -webkit-transform: rotateY(180deg); 
  }
  100% {
    left: 0;    
     -webkit-transform: rotateY(0deg);
  }
}

<div id="pot">
  <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>

Thí dụ

Chơi phim hoạt hình về phía trước, sau đó ngược:

Div {& nbsp; & nbsp; hoạt hình-hướng: thay thế;}
  animation-direction: alternate;
}

Hãy tự mình thử »

Thêm ví dụ "hãy thử nó" dưới đây.

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

Thuộc tính animation-direction xác định liệu một hình ảnh động nên được phát về phía trước, ngược hoặc trong các chu kỳ thay thế.

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.

Các số theo sau là -webkit-, -moz- hoặc -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố.

CSS Cú pháp

Định hướng hoạt hình: Bình thường | Đảo ngược | Thay thế | Phân phối thay thế | ban đầu | kế thừa;

Giá trị tài sản

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.

Thí dụ

Các số theo sau là -webkit-, -moz- hoặc -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố.

Tài sản
  animation-direction: alternate-reverse;
}

Hãy tự mình thử »

Thí dụ

Thêm ví dụ "hãy thử nó" dưới đây.

Định nghĩa và cách sử dụng
  animation-direction: reverse;
}

Hãy tự mình thử »

Thêm ví dụ "hãy thử nó" dưới đây.

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

Thuộc tính animation-direction xác định liệu một hình ảnh động nên được phát về phía trước, ngược hoặc trong các chu kỳ thay thế.

Làm thế nào để bạn tạo một hình ảnh động từ trái sang phải trong CSS?

Làm cách nào để thay đổi hướng của một hình ảnh động trong CSS?

Làm cách nào để di chuyển một hình ảnh từ trái sang phải trong CSS?

Hoạt hình là gì