CSS hoạt hình nhảy

Question

Hiệu ứng Bounce Animation được sử dụng để di chuyển nhanh phần tử lên, lùi hoặc ra khỏi bề mặt sau khi va chạm vào nó

Nội dung chính Show

Thông số
Điểm băt đâu
Giải phẫu của hoạt hình
Tạo rung động

cú pháp

@keyframes bounce {
   0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
   40% {transform: translateY(-30px);} 
   60% {transform: translateY(-15px);} 
}

Thông số

Chuyển đổi - Chuyển đổi áp dụng cho chuyển đổi 2d và 3d thành một phần tử

Thí dụ

   
      
   

   
   
      
      Reload page

Nó sẽ tạo ra kết quả sau -

Hoạt ảnh nảy mượt mà có thể được thực hiện với sự trợ giúp của HTML và CSS. Nó sẽ tạo ra kết quả đầu ra thú vị và mong muốn

Đối với dự án này, cần có một div đơn giản với class ball trong trang HTML

"ball">

Chúng tôi sẽ chuyển sang CSS để lập trình hoạt hình. Bây giờ, Flexbox được sử dụng để có quả bóng ở giữa trang và làm cho quả bóng có kích thước 70px x 70px. Nó có thể được thực hiện ở bất kỳ kích thước nào do người dùng lựa chọn vì nó xác định kích thước của quả bóng

   
      
   

   
   
      
      Reload page

0
   
      
   

   
   
      
      Reload page
      
      
      
   

1   
      
   

   
   
      
      Reload page
      
      
      
   

2   
      
   

   
   
      
      Reload page
      
      
      
   

3
   
      
   

   
   
      
      Reload page
      
      
      
   

1   
      
   

   
   
      
      Reload page
      
      
      
   

5____16"ball"0"ball"1"ball"2
"ball"3
"ball"4
   
      
   

   
   
      
      Reload page
      
      
      
   

1"ball"6"ball"0"ball"8"ball"9
   
      
   

   
   
      
      Reload page
      
      
      
   

1____91"ball"0"ball"8"ball"9
_______11____96____97>

8
   
      
   

   
   
      
      Reload page
      
      
      
   

1   
      
   

   
   
      
      Reload page
      
      
      
   

00"ball"0   
      
   

   
   
      
      Reload page
      
      
      
   

02   
      
   

   
   
      
      Reload page
      
      
      
   

03



"ball"3
Ở đây,
   
      
   

   
   
      
      Reload page
      
      
      
   

05 được dùng để căn giữa quả bóng theo chiều ngang. 
______106 biến hình vuông thành hình tròn. 
______107 biến hình tròn thành màu cam. Có nhiều ký hiệu mã khác nhau cho màu sắc được ghi nhớ. 
tạo khung hình chính. Khung hình chính trong hoạt ảnh CSS cho phép kiểm soát hoàn toàn hoạt ảnh. Sử dụng đơn giản từ khóa @keyframes theo sau là tên của hoạt ảnh, tôi. e, bóng nảy êm



   
      
   

   
   
      
      Reload page
      
      
      
   

08
   
      
   

   
   
      
      Reload page
      
      
      
   

09   
      
   

   
   
      
      Reload page
      
      
      
   

10
"ball"3
Trong khung hình chính, hãy sử dụng các từ khóa từ và đến để tạo điểm bắt đầu và điểm kết thúc cho hoạt ảnh



   
      
   

   
   
      
      Reload page
      
      
      
   

08



________ 109 ________ 114 ________ 115 ________ 83
   
      
   

   
   
      
      Reload page
      
      
      
   

09   
      
   

   
   
      
      Reload page
      
      
      
   

18   
      
   

   
   
      
      Reload page
      
      
      
   

19"ball"3
"ball"3
Theo hiểu biết của chúng tôi, chúng tôi có thể thêm các giá trị bắt đầu và kết thúc vào hoạt ảnh. Để tạo hiệu ứng nảy, chúng ta cần biến đổi vị trí của quả bóng. biến đổi cho phép sửa đổi tọa độ của một phần tử nhất định. Do đó, khung hình chính cuối cùng



   
      
   

   
   
      
      Reload page
      
      
      
   

08
   
      
   

   
   
      
      Reload page
      
      
      
   

09   
      
   

   
   
      
      Reload page
      
      
      
   

24   
      
   

   
   
      
      Reload page
      
      
      
   

25   
      
   

   
   
      
      Reload page
      
      
      
   

26   
      
   

   
   
      
      Reload page
      
      
      
   

27   
      
   

   
   
      
      Reload page
      
      
      
   

28   
      
   

   
   
      
      Reload page
      
      
      
   

27   
      
   

   
   
      
      Reload page
      
      
      
   

28   
      
   

   
   
      
      Reload page
      
      
      
   

27   
      
   

   
   
      
      Reload page
      
      
      
   

32
   
      
   

   
   
      
      Reload page
      
      
      
   

09   
      
   

   
   
      
      Reload page
      
      
      
   

34   
      
   

   
   
      
      Reload page
      
      
      
   

25   
      
   

   
   
      
      Reload page
      
      
      
   

26   
      
   

   
   
      
      Reload page
      
      
      
   

27   
      
   

   
   
      
      Reload page
      
      
      
   

28   
      
   

   
   
      
      Reload page
      
      
      
   

39   
      
   

   
   
      
      Reload page
      
      
      
   

28   
      
   

   
   
      
      Reload page
      
      
      
   

27   
      
   

   
   
      
      Reload page
      
      
      
   

32
"ball"3
Ở đây, các hàm translate3d nhận ba đầu vào, sự thay đổi theo trục 3 chiều (x, y, z). Nó sẽ dịch quả bóng theo trục 3 chiều. Bóng muốn di chuyển lên xuống thì bóng cần tịnh tiến theo trục y
Chạy khung hình chính. Vì @keyframe đã được tạo nên bây giờ nó cần chạy. Trong mã được đề cập ở trên của. ball{ }, phải thêm một dòng sau



   
      
   

   
   
      
      Reload page
      
      
      
   

14
   
      
   

   
   
      
      Reload page
      
      
      
   

09   
      
   

   
   
      
      Reload page
      
      
      
   

16
   
      
   

   
   
      
      Reload page
      
      
      
   

17
   
      
   

   
   
      
      Reload page
      
      
      
   

09   
      
   

   
   
      
      Reload page
      
      
      
   

19_______150   
      
   

   
   
      
      Reload page
      
      
      
   

66   
      
   

   
   
      
      Reload page
      
      
      
   

50   
      
   

   
   
      
      Reload page
      
      
      
   

28   
      
   

   
   
      
      Reload page
      
      
      
   

69   
      
   

   
   
      
      Reload page
      
      
      
   

28"ball"01   
      
   

   
   
      
      Reload page
      
      
      
   

28   
      
   

   
   
      
      Reload page
      
      
      
   

50"ball"04
 CSS hiện cung cấp cho chúng tôi nhiều kỹ thuật khác nhau để đạt được điều tương tự với một vài dòng mã. Để xác thực điều này, hoạt ảnh cuối cùng trong bài viết này sẽ cần ít hơn 10 dòng. Tất nhiên, tất cả phụ thuộc vào độ phức tạp của hoạt hình. Vì vậy, những gì sẽ được làm gì?
Nếu bạn đã xem bài viết gần đây của tôi về Parcel + React, thì bạn có thể đã bắt gặp hoạt ảnh Parcel mà tôi đang tạo. Nếu bạn chưa xem nó, hãy xem nó một lần nữa
Hoạt hình khá đơn giản nhưng hiệu quả. Chúng ta có thể nâng cao nhận thức và nó có thể hoạt động như một lời kêu gọi hành động trong bối cảnh phù hợp. Tuy nhiên, tạo hoạt ảnh là nguồn chính để thu hút sự chú ý của người dùng nên là một di tích từ những năm 90
Tìm cách để cải thiện kỹ năng của bạn? 
Điểm băt đâu
Cơ sở chỉ được làm bằng một gradient xuyên tâm với biểu tượng được đặt ở giữa
body {
    background: #7db9e8;
    background: -moz-radial-gradient(center, ellipse cover, #7db9e8 0%, #21374b 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #7db9e8 0%,#21374b 100%);
    background: radial-gradient(ellipse at center, #7db9e8 0%,#21374b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#21374b',GradientType=1 );
    margin: 0;
    width: 100vw;
    height: 100vh;

    #parcel {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 32px;
        animation: jump 1.2s infinite;
    }
}
 chỉ mục. scssĐã sao chép vào khay nhớ tạm.  Sao chép
Ở đây chúng tôi đang xác định một hoạt ảnh có tên là "nhảy" sẽ phát hơn 1. 2 giây và sẽ được lặp lại vô thời hạn
Không có nó, nó có vẻ hơi buồn nên hãy làm cho nó chuyển động
Giải phẫu của hoạt hình
Để hiểu đầy đủ những gì chúng tôi sẽ làm và lý do tại sao, chúng tôi muốn xem hoạt ảnh, từng khung hình và lưu ý những bước chúng tôi cần thực hiện để đạt được kết quả cuối cùng
Chúng tôi muốn bắt đầu từ một chế độ xem méo mó và di chuyển bưu kiện lên trên
Nếu nó đạt đến đỉnh, chúng tôi lắc nó và di chuyển nó trở lại vị trí ban đầu
Tất cả những gì chúng ta sẽ sử dụng cho đó là các biến đổi CSS. Chúng tôi đang bắt đầu với một gói bị méo mó, từ một vị trí bị đè bẹp. Đây là thứ sẽ tạo ấn tượng tạo đà để nhảy lên trên. Để làm cho nó trông phẳng, chúng ta có thể sử dụng >7 để thay đổi kích thước của nó một cách không cân xứng
@keyframes jump {
    0% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
}
 chỉ mục. scssĐã sao chép vào khay nhớ tạm.  Sao chép
Để giữ nó ở vị trí ban đầu, chúng tôi cũng phải vượt qua >8 để đảm bảo nó nằm ở tâm điểm chết. >7 lấy trục x trước rồi đến trục y. Điều này có nghĩa là chúng tôi đang giảm kích thước của nó trên trục y xuống 75% và làm cho nó bằng 125% kích thước ban đầu theo chiều ngang. Điều này sẽ cho chúng ta cái nhìn sau đây
Từ vị trí này, chúng tôi muốn di chuyển nó lên trên đồng thời loại bỏ tỷ lệ bị biến dạng
@keyframes jump {
    0% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
    50% { transform: translate(-50%, -150%) scale(1, 1); }
}
 chỉ mục. scssĐã sao chép vào khay nhớ tạm.  Sao chép
Đến một nửa hoạt hình, nó sẽ đạt đến đỉnh nên tôi chọn 50% cho bước tiếp theo. Chúng tôi đặt lại tỷ lệ thành 1. 1 và di chuyển nó trên trục y -100%, có nghĩa là nó sẽ tăng lên. Nhìn vào hình ảnh động ở giai đoạn này sẽ có vẻ kỳ lạ khi chúng ta bắt đầu từ một vị trí bị đè bẹp và kết thúc với kích thước ban đầu của nó. Khi hoạt ảnh được lặp lại, nó sẽ ngay lập tức nhảy vào vị trí được chia tỷ lệ, điều này sẽ làm cho hoạt ảnh bị lởm chởm
Chúng tôi muốn phần cuối của lần lặp trông giống như phần đầu của phần tiếp theo để tạo hoạt ảnh mượt mà. Để khắc phục, chúng tôi chỉ cần quay lại trạng thái ban đầu để chúng tôi chỉ thực hiện các phép biến đổi tương tự cho 100% mà chúng tôi có cho 0%
@keyframes jump {
    0% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
    50% { transform: translate(-50%, -150%) scale(1, 1); }
    100% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
}
 chỉ mục. scssĐã sao chép vào khay nhớ tạm.  Sao chép
Tất cả những gì còn lại là làm cho chiếc hộp rung chuyển ở đỉnh quỹ đạo của nó
Tạo rung động
Khi gói hàng chạm tới đỉnh, chúng tôi bắt đầu xoay nó qua lại, chính xác bốn lần. Để làm được điều đó, chúng ta có thể sử dụng biến đổi 
   
      
   

   
   
      
      Reload page
      
      
      
   

00 
@keyframes jump {
    0% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
    50% { transform: translate(-50%, -150%) scale(1, 1); }
    55% { transform: translate(-50%, -150%) rotate(15deg); }
    60% { transform: translate(-50%, -150%) rotate(-15deg); }
    65% { transform: translate(-50%, -150%) rotate(15deg); }
    70% { transform: translate(-50%, -150%) rotate(-15deg); }
    100% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
}
 chỉ mục. scssĐã sao chép vào khay nhớ tạm.  Sao chép
Chúng tôi bắt đầu bằng cách xoay nó 15° sang phải rồi xoay nó 30° sang trái. (-15° so với vị trí ban đầu) Chúng tôi lặp lại hai bước một lần nữa rồi quay lại vị trí bắt đầu. Tôi đã sử dụng một bước 5% cho mỗi vòng quay. Bạn có thể thử nghiệm với thời gian. Tăng khoảng cách giữa các bước sẽ làm chậm vòng quay, giảm nó sẽ làm cho nó nhanh hơn
Kết quả cuối cùng là một hộp nhảy vui vẻ. 📦 Thoải mái chơi đùa với dự án cuối cùng trên Codepen

programming css

CSS hoạt hình nhảy

cú pháp

Thông số

Thí dụ

Điểm băt đâu

Giải phẫu của hoạt hình

Tạo rung động

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội