Giải pháp 1 - Thêm xuống hoạt hình trên di chuột đầu tiên
lẽ là lựa chọn tốt nhất là không đưa các hình ảnh động trên xuống cho đến khi người dùng đã bay lượn trên container cho lần đầu tiên.
Điều này liên quan đến việc nghe sự kiện mouseover sau đó thêm lớp học với hoạt ảnh tại thời điểm đó và xóa trình xử lý sự kiện. Nhược điểm chính (tiềm năng) của điều này là nó dựa trên Javascript.
;(function(){
var c = document.getElementById('container');
function addAnim() {
c.classList.add('animated')
// remove the listener, no longer needed
c.removeEventListener('mouseover', addAnim);
};
// listen to mouseover for the container
c.addEventListener('mouseover', addAnim);
})();
#container {
position:relative;
width:100px;
height:100px;
border-style:inset;
}
#content {
position:absolute;
top:100px;
width:100%;
height:100%;
background-color:lightgreen;
opacity:0;
}
/* This gets added on first mouseover */
#container.animated #content {
-webkit-animation:animDown 1s ease;
}
#container:hover #content {
-webkit-animation:animUp 1s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes animUp {
0% {
-webkit-transform:translateY(0);
opacity:0;
}
100% {
-webkit-transform:translateY(-100%);
opacity:1;
}
}
@-webkit-keyframes animDown {
0% {
-webkit-transform:translateY(-100%);
opacity:1;
}
100% {
-webkit-transform:translateY(0);
opacity:0;
}
}
<div id="container">
<div id="content"></div>
</div>
Giải pháp 2 - chơi hoạt hình ẩn
Một cách khác xung quanh đây là bước đầu ẩn yếu tố, đảm bảo các hình ảnh động lượt trong khi nó bị ẩn, sau đó làm cho nó có thể nhìn thấy . Nhược điểm của điều này là thời gian có thể hơi tắt và nó được thực hiện có thể nhìn thấy quá sớm, và cũng là di chuột không có sẵn ngay lập tức.
Điều này yêu cầu một số Javascript chờ độ dài của hoạt ảnh và chỉ sau đó hiển thị #content. Điều này có nghĩa bạn cũng cần phải thiết lập ban đầu opacity-0 vì vậy nó không xuất hiện trên tải và cũng loại bỏ các visibility từ các khung hình chính - những không làm bất cứ điều gì anyway:
// wait for the animation length, plus a bit, then make the element visible
window.setTimeout(function() {
document.getElementById('content').style.visibility = 'visible';
}, 1100);
#container {
position:relative;
width:100px;
height:100px;
border-style:inset;
}
#content {
visibility:hidden;
-webkit-animation:animDown 1s ease;
position:absolute;
top:100px;
width:100%;
height:100%;
background-color:lightgreen;
opacity:0;
}
#container:hover #content {
-webkit-animation:animUp 1s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes animUp {
0% {
-webkit-transform:translateY(0);
opacity:0;
}
100% {
-webkit-transform:translateY(-100%);
opacity:1;
}
}
@-webkit-keyframes animDown {
0% {
-webkit-transform:translateY(-100%);
opacity:1;
}
100% {
-webkit-transform:translateY(0);
opacity:0;
}
}
<div id="container">
<div id="content"></div>
</div>
Giải pháp 3 - Sử dụng hiệu ứng chuyển tiếp
Trong trường hợp của bạn, bạn chỉ có thể thực hiện CSS này bằng cách thay thế keyframe s bằng cách thay thế transition. rts với opacity:0 và chỉ cần di chuột có một sự thay đổi trong opacity và transform:
#container {
position:relative;
width:100px;
height:100px;
border-style:inset;
}
#content {
position:absolute;
top:100px;
width:100%;
height:100%;
background-color:lightgreen;
/* initial state - hidden */
opacity:0;
/* set properties to animate - applies to hover and revert */
transition:opacity 1s, transform 1s;
}
#container:hover #content {
/* Just set properties to change - no need to change visibility */
opacity:1;
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
}
<div id="container">
<div id="content"></div>
</div>
này có thể trợ giúp: http://css-tricks.com/transitions-only-after-page-load/ – fcalderan
@FabrizioCalderan ý tưởng hay nhưng chỉ làm chậm hoạt ảnh, nó vẫn hoạt hình không chính xác khi lớp bị xóa – Rhumborl