search

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

1 năms trước
Trả lời: 0
Lượt xem: 112

4

Show

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi đang hoạt hình dòng với CSS3 từ chiều rộng: 0 đến chiều rộng: 100%. Hiện tại đang di chuyển từ trái sang phải, nhưng tôi muốn làm cho nó bắt đầu từ phải sang trái. Đây có phải là tất cả với các khung chính?

Đây là mã của tôi

 .content {
   width: 400px;
   height: 200px;
   color: white;
   cursor: pointer;
   text-transform: uppercase;
   padding-bottom: 20px;
   position: relative;
   background: #333;
 }
 .content .line {
   height: 2px;
   background: white;
   position: absolute;
   top: 10px;
   -webkit-animation: dude .75s 1 forwards;
   -moz-animation: dude .75s 1 forwards;
   -o-animation: dude .75s 1 forwards;
   animation: dude .75s 1 forwards;
 }
 @-webkit-keyframes dude {
   0% {
     width: 0;
   }
   100% {
     width: 100%;
   }
 }
 @-moz-keyframes dude {
   0% {
     width: 0;
   }
   100% {
     width: 100%;
   }
 }
 @-o-keyframes dude {
   0% {
     width: 0;
   }
   100% {
     width: 100%;
   }
 }
 @keyframes dude {
   0% {
     width: 0;
   }
   100% {
     width: 100%;
   }
 }
<div class="content">
  <div class="line"></div>
</div>

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

Jinu Kurian

8,5373 Huy hiệu vàng23 Huy hiệu bạc34 Huy hiệu đồng3 gold badges23 silver badges34 bronze badges

Đã hỏi ngày 2 tháng 6 năm 2016 lúc 11:38Jun 2, 2016 at 11:38

1

Xem fiddle nàyFIDDLE

cộng

.content .line {
   right: 0;
}


.content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
<div class="content">
  <div class="line"></div>
</div>

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

Mistermansam

23.8K11 Huy hiệu vàng68 Huy hiệu bạc88 Huy hiệu đồng11 gold badges68 silver badges88 bronze badges

Đã trả lời ngày 2 tháng 6 năm 2016 lúc 11:46Jun 2, 2016 at 11:46

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

Jinu Kurianjinu KurianJinu Kurian

8,5373 Huy hiệu vàng23 Huy hiệu bạc34 Huy hiệu đồng3 gold badges23 silver badges34 bronze badges

1

Đã hỏi ngày 2 tháng 6 năm 2016 lúc 11:38

@keyframes dude {
  0% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}

Xem fiddle này

cộngJun 2, 2016 at 11:44

Mistermansamtszarzynski

23.8K11 Huy hiệu vàng68 Huy hiệu bạc88 Huy hiệu đồng7 silver badges15 bronze badges

1

Đã trả lời ngày 2 tháng 6 năm 2016 lúc 11:46

animation: dude .75s 1 reverse;

Jinu Kurianjinu KurianJun 2, 2016 at 13:03

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

Cố gắng làm động thuộc tính "trái" thay vì chiều rộng vì phần tử của bạn đã có vị trí được đặt thành tuyệt đối.devellopah

VĨ CẦM2 silver badges15 bronze badges

Xem thảo luận

Cải thiện bài viết

Lưu bài viết

  • Đọc
  • Bàn luận

    • Xem thảo luận

    Cải thiện bài viết

    Lưu bài viết

    Đọc

    Bàn luận The approach is to first create a straight line and then animate it using keyframes. It will be done in a two-step. First for forwarding movement and second for backward movement. The below code will follow the same approach.

    Chuyển động tuyến tính của một đường thẳng có nghĩa là đường sẽ bắt đầu từ một điểm, đi đến điểm thứ hai, và sau đó quay trở lại điểm bắt đầu. Đó là một loại chuyển động. Chúng tôi sẽ chỉ sử dụng CSS. In HTML, we have created a div element that is used to make a straight line.

    <!DOCTYPE html>

    Cách tiếp cận: Cách tiếp cận là trước tiên tạo ra một đường thẳng và sau đó làm động nó bằng cách sử dụng các khung chính. Nó sẽ được thực hiện trong một bước. Đầu tiên để chuyển tiếp chuyển động và thứ hai cho chuyển động lạc hậu. Mã dưới đây sẽ tuân theo cách tiếp cận tương tự.

    <div class="content">
  <div class="line"></div>
</div>
    0
    <div class="content">
  <div class="line"></div>
</div>
    7
    <div class="content">
  <div class="line"></div>
</div>
    5

    HTML: Trong HTML, chúng tôi đã tạo ra một phần tử div được sử dụng để tạo một đường thẳng.

    ____10

    <div class="content">
  <div class="line"></div>
</div>
    1 
    <div class="content">
  <div class="line"></div>
</div>
    2
    <div class="content">
  <div class="line"></div>
</div>
    3
    <div class="content">
  <div class="line"></div>
</div>
    4
    <div class="content">
  <div class="line"></div>
</div>
    5

    <div class="content">
  <div class="line"></div>
</div>
    9
    <div class="content">
  <div class="line"></div>
</div>
    0
    .content .line {
   right: 0;
}
    1 
    .content .line {
   right: 0;
}
    2
    <div class="content">
  <div class="line"></div>
</div>
    3
    .content .line {
   right: 0;
}
    4 
    .content .line {
   right: 0;
}
    5

    <div class="content">
  <div class="line"></div>
</div>
    9
    <div class="content">
  <div class="line"></div>
</div>
    0
    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    9
    <div class="content">
  <div class="line"></div>
</div>
    0
    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    9
    <div class="content">
  <div class="line"></div>
</div>
    5

    <div class="content">
  <div class="line"></div>
</div>
    3
    <div class="content">
  <div class="line"></div>
</div>
    7
    <div class="content">
  <div class="line"></div>
</div>
    5

    <div class="content">
  <div class="line"></div>
</div>
    0
    <div class="content">
  <div class="line"></div>
</div>
    7
    <div class="content">
  <div class="line"></div>
</div>
    5

    <div class="content">
  <div class="line"></div>
</div>
    9
    <div class="content">
  <div class="line"></div>
</div>
    0
    .content .line {
   right: 0;
}
    1 
    .content .line {
   right: 0;
}
    9
    <div class="content">
  <div class="line"></div>
</div>
    3
    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    1 
    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    2
    <div class="content">
  <div class="line"></div>
</div>
    3

    <div class="content">
  <div class="line"></div>
</div>
    3
    <div class="content">
  <div class="line"></div>
</div>
    7
    <div class="content">
  <div class="line"></div>
</div>
    5

    <div class="content">
  <div class="line"></div>
</div>
    3
    <div class="content">
  <div class="line"></div>
</div>
    1
    <div class="content">
  <div class="line"></div>
</div>
    5

    CSS:

    • .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
      4
      .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
      5 
      .content .line {
   right: 0;
}
      5
    • Các
    • Tạo một đường thẳng bằng cách cung cấp chiều cao và chiều rộng tối thiểu của sở thích của bạn.

    animation: dude .75s 1 reverse;
    4

    <div class="content">
  <div class="line"></div>
</div>
    9
    animation: dude .75s 1 reverse;
    6

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4
    animation: dude .75s 1 reverse;
    8
    animation: dude .75s 1 reverse;
    9animation-direction0animation-direction1

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4animation-direction3
    animation: dude .75s 1 reverse;
    9animation-direction0animation-direction1

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4animation-direction8
    animation: dude .75s 1 reverse;
    9reverse0animation-direction1

    <div class="content">
  <div class="line"></div>
</div>
    9reverse3

    <div class="content">
  <div class="line"></div>
</div>
    9reverse5

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4reverse7
    animation: dude .75s 1 reverse;
    9reverse9animation-direction1

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4<!DOCTYPE html>2
    animation: dude .75s 1 reverse;
    9<!DOCTYPE html>4animation-direction1

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4animation-direction8
    animation: dude .75s 1 reverse;
    9<!DOCTYPE html>9animation-direction1

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4
    <div class="content">
  <div class="line"></div>
</div>
    02
    animation: dude .75s 1 reverse;
    9
    <div class="content">
  <div class="line"></div>
</div>
    04animation-direction1

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4
    <div class="content">
  <div class="line"></div>
</div>
    07
    animation: dude .75s 1 reverse;
    9
    <div class="content">
  <div class="line"></div>
</div>
    09animation-direction1

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4
    <div class="content">
  <div class="line"></div>
</div>
    12
    animation: dude .75s 1 reverse;
    9
    <div class="content">
  <div class="line"></div>
</div>
    09animation-direction1

    Phúc âm đường thẳng này bằng cách sử dụng trước khi chọn và cung cấp cho nó một hình ảnh động tuyến tính với định danh KeyFrames có tên là Animate.

    <div class="content">
  <div class="line"></div>
</div>
    9reverse3

    <div class="content">
  <div class="line"></div>
</div>
    9
    <div class="content">
  <div class="line"></div>
</div>
    25

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4
    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    2
    animation: dude .75s 1 reverse;
    9
    <div class="content">
  <div class="line"></div>
</div>
    29animation-direction1

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4
    <div class="content">
  <div class="line"></div>
</div>
    02
    animation: dude .75s 1 reverse;
    9
    <div class="content">
  <div class="line"></div>
</div>
    04animation-direction1

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4
    <div class="content">
  <div class="line"></div>
</div>
    07
    animation: dude .75s 1 reverse;
    9animation-direction0animation-direction1

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4
    <div class="content">
  <div class="line"></div>
</div>
    12
    animation: dude .75s 1 reverse;
    9animation-direction0animation-direction1

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4reverse7
    animation: dude .75s 1 reverse;
    9
    <div class="content">
  <div class="line"></div>
</div>
    49animation-direction1

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4<!DOCTYPE html>2
    animation: dude .75s 1 reverse;
    9
    <div class="content">
  <div class="line"></div>
</div>
    49animation-direction1

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4animation-direction8
    animation: dude .75s 1 reverse;
    9reverse0animation-direction1

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4
    <div class="content">
  <div class="line"></div>
</div>
    62
    <div class="content">
  <div class="line"></div>
</div>
    63
    <div class="content">
  <div class="line"></div>
</div>
    64

    <div class="content">
  <div class="line"></div>
</div>
    9reverse3

    <div class="content">
  <div class="line"></div>
</div>
    9
    <div class="content">
  <div class="line"></div>
</div>
    68

    Hoạt hình cho KeyFrames rất đơn giản. Đối với nửa khung đầu tiên tạo ra chiều rộng 100%(chuyển động chuyển tiếp) và sau đó giảm xuống 0%(chuyển động ngược) cho nửa khung tiếp theo.

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4
    <div class="content">
  <div class="line"></div>
</div>
    17
    <div class="content">
  <div class="line"></div>
</div>
    18
    <div class="content">
  <div class="line"></div>
</div>
    19
    <div class="content">
  <div class="line"></div>
</div>
    18
    <div class="content">
  <div class="line"></div>
</div>
    21

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4reverse3

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4
    <div class="content">
  <div class="line"></div>
</div>
    70 
    <div class="content">
  <div class="line"></div>
</div>
    71

    <div class="content">
  <div class="line"></div>
</div>
    72
    <div class="content">
  <div class="line"></div>
</div>
    12
    animation: dude .75s 1 reverse;
    9
    <div class="content">
  <div class="line"></div>
</div>
    49animation-direction1

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4reverse3

    Hoạt hình cho KeyFrames rất đơn giản. Đối với nửa khung đầu tiên tạo ra chiều rộng 100%(chuyển động chuyển tiếp) và sau đó giảm xuống 0%(chuyển động ngược) cho nửa khung tiếp theo.

    <div class="content">
  <div class="line"></div>
</div>
    72
    <div class="content">
  <div class="line"></div>
</div>
    12
    animation: dude .75s 1 reverse;
    9animation-direction0animation-direction1

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4reverse3

    <div class="content">
  <div class="line"></div>
</div>
    9reverse3

    .content .line {
   right: 0;
}
    01

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4
    <div class="content">
  <div class="line"></div>
</div>
    17
    <div class="content">
  <div class="line"></div>
</div>
    18
    <div class="content">
  <div class="line"></div>
</div>
    19
    <div class="content">
  <div class="line"></div>
</div>
    18
    <div class="content">
  <div class="line"></div>
</div>
    21     In this section, we will combine both HTML and CSS code to make a straight line animation effect.

    <!DOCTYPE html>

    Cách tiếp cận: Cách tiếp cận là trước tiên tạo ra một đường thẳng và sau đó làm động nó bằng cách sử dụng các khung chính. Nó sẽ được thực hiện trong một bước. Đầu tiên để chuyển tiếp chuyển động và thứ hai cho chuyển động lạc hậu. Mã dưới đây sẽ tuân theo cách tiếp cận tương tự.

    <div class="content">
  <div class="line"></div>
</div>
    0
    <div class="content">
  <div class="line"></div>
</div>
    7
    <div class="content">
  <div class="line"></div>
</div>
    5

    HTML: Trong HTML, chúng tôi đã tạo ra một phần tử div được sử dụng để tạo một đường thẳng.

    ____10

    <div class="content">
  <div class="line"></div>
</div>
    1 
    <div class="content">
  <div class="line"></div>
</div>
    2
    <div class="content">
  <div class="line"></div>
</div>
    3
    <div class="content">
  <div class="line"></div>
</div>
    4
    <div class="content">
  <div class="line"></div>
</div>
    5

    <div class="content">
  <div class="line"></div>
</div>
    9
    <div class="content">
  <div class="line"></div>
</div>
    0
    .content .line {
   right: 0;
}
    1 
    .content .line {
   right: 0;
}
    2
    <div class="content">
  <div class="line"></div>
</div>
    3
    .content .line {
   right: 0;
}
    4 
    .content .line {
   right: 0;
}
    5

    <div class="content">
  <div class="line"></div>
</div>
    9
    <div class="content">
  <div class="line"></div>
</div>
    0
    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    9
    <div class="content">
  <div class="line"></div>
</div>
    5

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4
    .content .line {
   right: 0;
}
    35

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4
    .content .line {
   right: 0;
}
    37

    <div class="content">
  <div class="line"></div>
</div>
    9
    <div class="content">
  <div class="line"></div>
</div>
    3
    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    9
    <div class="content">
  <div class="line"></div>
</div>
    5

    <div class="content">
  <div class="line"></div>
</div>
    9
    <div class="content">
  <div class="line"></div>
</div>
    0
    .content .line {
   right: 0;
}
    44
    <div class="content">
  <div class="line"></div>
</div>
    5

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4
    animation: dude .75s 1 reverse;
    6

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content .line {
   right: 0;
}
    49

    <div class="content">
  <div class="line"></div>
</div>
    9
    <div class="content">
  <div class="line"></div>
</div>
    0
    .content .line {
   right: 0;
}
    1 
    .content .line {
   right: 0;
}
    9
    <div class="content">
  <div class="line"></div>
</div>
    3
    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    1 
    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    2
    <div class="content">
  <div class="line"></div>
</div>
    3

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content .line {
   right: 0;
}
    53

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4reverse3

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4reverse5

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content .line {
   right: 0;
}
    59

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content .line {
   right: 0;
}
    61

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content .line {
   right: 0;
}
    63

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content .line {
   right: 0;
}
    65

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content .line {
   right: 0;
}
    67

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content .line {
   right: 0;
}
    69

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content .line {
   right: 0;
}
    71

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4reverse3

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4
    <div class="content">
  <div class="line"></div>
</div>
    25

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content .line {
   right: 0;
}
    77

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content .line {
   right: 0;
}
    65

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content .line {
   right: 0;
}
    81

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content .line {
   right: 0;
}
    83

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content .line {
   right: 0;
}
    85

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content .line {
   right: 0;
}
    87

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content .line {
   right: 0;
}
    53

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content .line {
   right: 0;
}
    91

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4reverse3

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4
    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    5 
    .content .line {
   right: 0;
}
    5

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content .line {
   right: 0;
}
    97

    .content .line {
   right: 0;
}
    98
    .content .line {
   right: 0;
}
    83

    <div class="content">
  <div class="line"></div>
</div>
    72reverse3

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    03

    .content .line {
   right: 0;
}
    98
    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    05

    <div class="content">
  <div class="line"></div>
</div>
    72reverse3

    <div class="content">
  <div class="line"></div>
</div>
    72
    .content .line {
   right: 0;
}
    97

    .content .line {
   right: 0;
}
    98
    .content .line {
   right: 0;
}
    83

    <div class="content">
  <div class="line"></div>
</div>
    72reverse3

    .content {
  width: 400px;
  height: 200px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  padding-bottom: 20px;
  position: relative;
  background: #333;
}
.content .line {
  height: 2px;
  background: white;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}
@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
    4reverse3

    <div class="content">
  <div class="line"></div>
</div>
    9
    <div class="content">
  <div class="line"></div>
</div>
    3
    .content .line {
   right: 0;
}
    44
    <div class="content">
  <div class="line"></div>
</div>
    5

    <div class="content">
  <div class="line"></div>
</div>
    3
    <div class="content">
  <div class="line"></div>
</div>
    7
    <div class="content">
  <div class="line"></div>
</div>
    5

    <div class="content">
  <div class="line"></div>
</div>
    0
    <div class="content">
  <div class="line"></div>
</div>
    7
    <div class="content">
  <div class="line"></div>
</div>
    5

    Các

    <div class="content">
  <div class="line"></div>
</div>
    3
    <div class="content">
  <div class="line"></div>
</div>
    7
    <div class="content">
  <div class="line"></div>
</div>
    5

    <div class="content">
  <div class="line"></div>
</div>
    3
    <div class="content">
  <div class="line"></div>
</div>
    1
    <div class="content">
  <div class="line"></div>
</div>
    5

    Output:

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


    Làm thế nào để tôi thực hiện một động vật động từ trái sang phải trong CSS?

    Để 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); .change the transform around it's y-axis. Note that if we make it turn around only at 50% it will slowly turn around at the same time it's moving. So we need to specify how long the potato should be at -webkit-transform: rotateY(0deg); .

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

    Cú pháp của thuộc tính hướng hoạt hình CSS là: Phim hoạt hình: Bình thường | Đảo ngược | Thay thế | thay thế-đảo ngược | ban đầu | thừa kế; Để đảm bảo hoạt hình của bạn hoạt động chính xác và di chuyển theo hướng bạn muốn, bạn cũng phải xác định tên hoạt hình và thuộc tính thời lượng.animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit; To ensure your animation works correctly and moves in the direction you want, you have to define the animation name and duration properties as well.

    Làm thế nào để bạn làm động các dòng trong CSS?

    Nó sẽ được thực hiện trong một bước ...
    Tạo một đường thẳng bằng cách cung cấp chiều cao và chiều rộng tối thiểu của sở thích của bạn ..
    Phúc âm đường thẳng này bằng cách sử dụng trước khi chọn và cung cấp cho nó một hình ảnh động tuyến tính với định danh KeyFrames có tên là Animate ..
    Hoạt hình cho KeyFrames rất đơn giản ..

    Bạn có thể làm động vị trí CSS không?

    Bất kỳ thuộc tính CSS nào được chuyển đổi cũng có thể được hoạt hình.Sử dụng Animation-Delay để tạm dừng trước khi thực hiện hoạt hình, sử dụng cùng các giá trị thời gian như trong thời lượng.Thuộc tính có hình ảnh động đặt số lần hoạt hình phát, dưới dạng số nguyên hoặc vô hạn.. Use animation-delay to pause before executing an animation, using the same time values as for duration. The animation-iteration-count property sets the number of times the animation plays, either as an integer or infinite.

    programming css Move animation CSS

    Bài Viết Liên Quan

    Hướng dẫn what is the max length of string variable in python? - Độ dài tối đa của biến chuỗi trong python là gì?
    Hướng dẫn what is the max length of string variable in python? - Độ dài tối đa của biến chuỗi trong python là gì?

    Hướng dẫn add object inside object javascript - thêm đối tượng bên trong đối tượng javascript
    Hướng dẫn add object inside object javascript - thêm đối tượng bên trong đối tượng javascript

    Hướng dẫn combine python to exe - kết hợp python với exe
    Hướng dẫn combine python to exe - kết hợp python với exe

    Hướng dẫn how do you write to a file in python? - làm thế nào để bạn ghi vào một tệp trong python?
    Hướng dẫn how do you write to a file in python? - làm thế nào để bạn ghi vào một tệp trong python?

    Hướng dẫn which mode creates a new file if the file does not exist in python? - Chế độ nào tạo tệp mới nếu tệp không tồn tại trong python?
    Hướng dẫn which mode creates a new file if the file does not exist in python? - Chế độ nào tạo tệp mới nếu tệp không tồn tại trong python?

    Hướng dẫn php file resource - tài nguyên tệp php
    Hướng dẫn php file resource - tài nguyên tệp php

    Hướng dẫn how do you find the total number of elements in a matrix in python? - làm thế nào để bạn tìm thấy tổng số phần tử trong một ma trận trong python?
    Hướng dẫn how do you find the total number of elements in a matrix in python? - làm thế nào để bạn tìm thấy tổng số phần tử trong một ma trận trong python?

    Phân loại sản phẩm wordpress
    Phân loại sản phẩm wordpress

    Hướng dẫn how do you count the number of times a number appears in an array python? - làm thế nào để bạn đếm số lần một số xuất hiện trong một chuỗi python?
    Hướng dẫn how do you count the number of times a number appears in an array python? - làm thế nào để bạn đếm số lần một số xuất hiện trong một chuỗi python?

    The face vietnam 2023 kết quả
    The face vietnam 2023 kết quả

    MỚI CẬP NHẬP

    Toán 6 bài 8 quy tắc dấu ngoặc năm 2024
    4 phúts trước . bởi DynamicRacism
    Ad trong tiếng anh là gì năm 2024
    15 phúts trước . bởi NeuralPragmatism
    Bài tập câu chủ động bị động và rút gọn năm 2024
    23 phúts trước . bởi MinimumDaybreak
    B-lactamase nhóm a c d là gì năm 2024
    48 phúts trước . bởi FeministTheology
    Top nhung cau chuyen dam my danh cho nguoi me năm 2024
    51 phúts trước . bởi ParticularThreshold
    Bệnh truyền qua thực phẩm tiếng anh là gì năm 2024
    1 giờs trước . bởi Straight-backedPoker
    Top truyện ngược hay bi thương ngược dòng thành sông năm 2024
    1 giờs trước . bởi UntroubledMisery
    Checklist các nội dung test theo chuẩn owasp top ten năm 2024
    1 giờs trước . bởi RoaringMagnificence
    Bài tập câu điều kiện loại 2 online năm 2024
    1 giờs trước . bởi GraveDrilling
    Mod skin liên quân không bị lỗi mạng năm 2024
    2 giờs trước . bởi InflexibleNutrition

    Xem Nhiều

    Cách mạng công nghiệp 4.0 cơ hội nào cho startup năm 2024
    1 tuầns trước . bởi SinfulBoldness
    Các dạng toán chương 1 kinh tế vĩ mô năm 2024
    5 ngàys trước . bởi HeathenPolling
    Cách bố trí hàng hóa trên các kệ hàng năm 2024
    2 ngàys trước . bởi RidiculousBookmark
    Bài tập tự luận unit 12 tiếng anh 8 năm 2024
    4 ngàys trước . bởi Ten-yearCross-examination
    724 22 lê văn lương.phước kiểng nhà bè năm 2024
    3 ngàys trước . bởi AcousticEnthusiasm
    Caâu hỏi trắc nghiệm về văn hóa tổ chức năm 2024
    20 giờs trước . bởi EngravedSchism
    Backtory nghĩa là gì câu chuyện hậu trường năm 2024
    4 ngàys trước . bởi RipplingProcessor
    Hiệu ứng nhiệt của phản ứng hóa học năm 2024
    6 ngàys trước . bởi PlaintiveRepayment
    Số điện thoại của lazada là gì năm 2024
    1 ngàys trước . bởi ForensicElectricity
    Lỗi laptop khởi động lại bị mất điện năm 2024
    1 ngàys trước . bởi SpaciousLifeline

    Chúng tôi

    Điều khoản

    Trợ giúp

    Mạng xã hội

    Bản quyền © 2024 Inc.