10
Ví dụ HTML sau bao gồm hai hình ảnh; một nền, cái kia là một đối tượng. Cả hai đều hoạt hình bằng cách sử dụng tỷ lệ và xoay. Trên màn hình HD đầy đủ, nó có xu hướng bị thay đổi. Khi bạn nhìn vào hiệu suất trong Firefox nó được khoảng 20 khung hình/giây.Cách tối ưu hóa hoạt ảnh CSS (tỷ lệ, xoay, làm mờ)
Trước tiên, tôi đã sử dụng jQuery; để cải thiện hiệu suất, tôi đã chọn CSS, nhưng nó vẫn chưa hoàn hảo. Để tái tạo sự cố, hãy chuyển sang chế độ toàn màn hình. Làm thế nào tôi có thể làm cho nó tốt hơn?
.html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #121212;
}
.maincontainer {
width: 100%;
padding-bottom: 100%;
position: fixed;
overflow: hidden;
}
.bg {
background-image: url(http://wallpaper-gallery.net/images/beautiful-pictures-of-nature/beautiful-pictures-of-nature-2.jpg);
height: 100%;
width: 100%;
display: block;
position: absolute;
z-index: -99;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-position: top;
background-size: 100% auto;
background-repeat: no-repeat;
}
.bg2 {
height: 100%;
width: 100%;
display: block;
position: absolute;
z-index: -99;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-position: top;
background-size: 100% auto;
background-repeat: no-repeat;
}
.rain {
background-image: url(https://media.giphy.com/media/OvFQrZk8b5N0Q/source.gif);
height: 100%;
width: 100%;
display: block;
position: absolute;
z-index: -1;
-webkit-filter: blur(1px);
}
.animate-bg {
-webkit-animation-name: animateBg;
animation-name: animateBg;
}
.animate {
-webkit-animation-duration: 35000;
animation-duration: 35000ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(.3, 0, .7, 1);
animation-timing-function: cubic-bezier(.3, 0, .7, 1);
animation-iteration-count: infinite;
}
/* Zoom in Keyframes */
@-webkit-keyframes animateBg {
0% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.3) rotate(4deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
@keyframes animateBg {
0% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.3) rotate(4deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
/*End of Zoom in Keyframes */
.eagle {
background-image: url(http://www.pngmart.com/files/1/Flying-Eagle-PNG-Image.png);
height: 100%;
width: 100%;
display: block;
position: absolute;
z-index: 900;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-position: top;
background-size: 100% auto;
background-repeat: no-repeat;
}
.animate-eagle {
-webkit-animation-duration: 35000;
animation-duration: 35000ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(.3, 0, .7, 1);
animation-timing-function: cubic-bezier(.3, 0, .7, 1);
animation-iteration-count: infinite;
-webkit-animation-name: animateeagle;
animation-name: animateeagle;
}
/* Zoom in Keyframes */
@-webkit-keyframes animateeagle {
0% {
transform: scale(0.8) rotate(0deg);
}
30% {
transform: scale(1.05) rotate(-2deg);
}
50% {
transform: scale(1.1) rotate(0deg);
}
80% {
transform: scale(1.05) rotate(2deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
@keyframes animateeagle {
0% {
transform: scale(1) rotate(0deg);
}
30% {
transform: scale(1.05) rotate(-2deg);
}
50% {
transform: scale(1.1) rotate(0deg);
}
80% {
transform: scale(1.05) rotate(2deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
/*End of Zoom in Keyframes */
.blur {
animation: blur 5000ms;
}
@keyframes blur {
0% {
-webkit-filter: blur(0px);
}
20% {
-webkit-filter: blur(3px);
}
40% {
-webkit-filter: blur(5px);
}
60% {
-webkit-filter: blur(7px);
}
80% {
-webkit-filter: blur(5px);
}
100% {
-webkit-filter: blur(0px);
}
}
@-webkit-keyframes blur {
0% {
-webkit-filter: blur(0px);
}
20% {
-webkit-filter: blur(3px);
}
40% {
-webkit-filter: blur(5px);
}
60% {
-webkit-filter: blur(7px);
}
80% {
-webkit-filter: blur(5px);
}
100% {
-webkit-filter: blur(0px);
}
}
.unblur {
animation: unblur 1000ms;
}
@keyframes unblur {
0% {
-webkit-filter: blur(5px);
}
100% {
-webkit-filter: blur(0px);
}
}
@-webkit-keyframes unblur {
0% {
-webkit-filter: blur(5px);
}
100% {
-webkit-filter: blur(0px);
}
}<div class="maincontainer">
<div id="bg2" class="bg2">
<div id="bg" class="bg animate animate-bg">
<div class="rain"></div>
<div class="drops"></div>
</div>
</div>
<div id="eagle">
<div class="eagle animate-eagle">
</div>
</div>
</div>Câu hỏi trùng lặp đề nghị không liên quan vì tôi không thấy thế nào điều này có thể được giải quyết với canvas.
Nếu không được xử lý, '//' không bình luận CSS hợp lệ ... –
có thể trùng lặp của [hiệu suất hoạt hình CSS] (https: // stackoverflow.com/questions/32996102/css-animation-performance) – z3nth10n
@Ikillnukes Tôi không thấy vấn đề của mình có thể được giải quyết như thế nào với các công cụ liên quan đến canvas hoặc js được đề cập trong câu hỏi đó. – Milos