Hướng dẫn css animation move up and down - hoạt hình css di chuyển lên và xuống

Xin chào, tôi đang cố gắng thực hiện nhiệm vụ đơn giản là di chuyển một div lên xuống để tạo hiệu ứng nổi/lơ lửng bằng cách sử dụng đáy thay vì trên cùng. Vì vậy, từ

.object {
  animation: MoveUpDown 1s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 100px;
  }
}

0 đến

.object {
  animation: MoveUpDown 1s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 100px;
  }
}

1.

Tôi mới đến CSS và Keyframes! Như bạn có thể nói nhưng đây là những gì tôi đã thử và dường như nó không làm gì cả:

.piece-open-space #emma {
    background-image: url('images/perso/Emma.png?1418918581');
    width: 244px;
    height: 299px;
    position: absolute;
    display: block;
    width: 244px;
    background-image: none;
    position: absolute;
    left: 2149px;
    bottom: 63px;
    -webkit-animation: MoveUpDown 50s linear infinite;
}

@-webkit-keyframes MoveUpDown {
    from {
        bottom: 63px;
    }
    to { 
        bottom: 400px;
    }
}

Cập nhật

Vấn đề là nó sẽ không lặp lại là mục tiêu tôi đang tìm kiếm nó lên 400px sau đó ngay lập tức quay trở lại 63px làm thế nào tôi sẽ đưa nó lên 400px và sau đó quay trở lại 63px, nó mang lại hiệu ứng của một vòng lặp vô tận của "lơ lửng/nổi".

Diogo

3,4391 Huy hiệu vàng22 Huy hiệu bạc 30 Huy hiệu Đồng1 gold badge22 silver badges30 bronze badges

Đã hỏi ngày 14 tháng 3 năm 2016 lúc 14:36Mar 14, 2016 at 14:36

1

Bạn có thể điều chỉnh thời gian của

.object {
  animation: MoveUpDown 1s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 100px;
  }
}

2 như sau:

.object {
  animation: MoveUpDown 1s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 100px;
  }
}

  hello world!

CHỈNH SỬA

Như đã chỉ ra trong một bình luận dưới đây sử dụng

.object {
  animation: MoveUpDown 1s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 100px;
  }
}

3 được ưu tiên cho các hoạt hình hiệu suất cao.

.object {
  animation: MoveUpDown 1s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100px);
  }
}

  hello world!

Đã trả lời ngày 14 tháng 3 năm 2016 lúc 14:46Mar 14, 2016 at 14:46

Nhãn dánStickers

72.4K21 Huy hiệu vàng138 Huy hiệu bạc178 Huy hiệu đồng21 gold badges138 silver badges178 bronze badges

1

Lên/xuống với hoạt hình:animation:

div {
    -webkit-animation: action 1s infinite  alternate;
    animation: action 1s infinite  alternate;
}

@-webkit-keyframes action {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

@keyframes action {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

↓

Diogo

3,4391 Huy hiệu vàng22 Huy hiệu bạc 30 Huy hiệu Đồng1 gold badge22 silver badges30 bronze badges

Đã hỏi ngày 14 tháng 3 năm 2016 lúc 14:36Jun 22, 2018 at 0:24

Bạn có thể điều chỉnh thời gian của

.object {
  animation: MoveUpDown 1s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 100px;
  }
}

2 như sau:sree

CHỈNH SỬA2 gold badges17 silver badges13 bronze badges

Như đã chỉ ra trong một bình luận dưới đây sử dụng

.object {
  animation: MoveUpDown 1s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 100px;
  }
}

3 được ưu tiên cho các hoạt hình hiệu suất cao.

div {
        -webkit-animation: upNdown 2s infinite linear;
        animation: upNdown 2s infinite linear;
    }
@-webkit-keyframes upNdown {
         0% { }
         50% { transform: translate(-5px); }
         100% { }
    }
@keyframes upNdown {
         0% { }
         50% { transform: translate(-5px); }
         100% { }
    }

Đã trả lời ngày 14 tháng 3 năm 2016 lúc 14:46Nov 8, 2019 at 9:50

Nhãn dánIdan

72.4K21 Huy hiệu vàng138 Huy hiệu bạc178 Huy hiệu đồng25 silver badges31 bronze badges

Lên/xuống với hoạt hình:

Đã trả lời ngày 22 tháng 6 năm 2018 lúc 0:24

sreesree

.piece-open-space #emma {
    background-image: url('images/perso/Emma.png?1418918581');
    width: 244px;
    height: 299px;
    display: block;
    background-image: none;
    position: absolute;
    left: 2149px;
    bottom: 63px;
    -webkit-animation: MoveUpDown 50s linear infinite;
    -webkit-animation-direction: alternate;
}

2.8332 Huy hiệu vàng17 Huy hiệu bạc13 Huy hiệu đồngMar 14, 2016 at 14:48

Lên và xuống:burnedikt

Đã trả lời ngày 8 tháng 11 năm 2019 lúc 9:505 silver badges17 bronze badges

Idanidan

@keyframes up-down {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(8px);
  }
}

2.94925 huy hiệu bạc31 huy hiệu đồngNov 8, 2020 at 15:12

Có lẽ bạn sẽ muốn thêm

.object {
  animation: MoveUpDown 1s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 100px;
  }
}

4 (hoặc

.object {
  animation: MoveUpDown 1s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 100px;
  }
}

5) vào các quy tắc phong cách của bạn trên

.object {
  animation: MoveUpDown 1s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 100px;
  }
}

6.Piyush

Điều đó sẽ cung cấp cho bạn hiệu ứng trôi nổi.1 silver badge8 bronze badges