Hoạt hình chuyển tiếp css3 khi tải?

195

Có thể sử dụng hoạt hình chuyển tiếp CSS3 khi tải trang mà không cần sử dụng Javascript không?

Đây là loại những gì tôi muốn, nhưng khi tải trang:

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

Những gì tôi tìm thấy cho đến nay

css  webkit  css-transitions  css-animations 
— Jens Törnell
nguồn
— NickFitz
2
Các khung hình chính sẽ thực hiện điều này và cung cấp dự phòng tốt nhất khi hoạt ảnh CSS3 không được hỗ trợ. Tại sao bạn nghĩ rằng họ quá chậm?
— zachleat
Chào! Liên kết hiện đã bị hỏng và tôi không biết nó có nghĩa là đi đâu để ai đó có thể sửa nó!
— Linux4Life531

Câu trả lời:

458

Bạn có thể chạy hoạt hình CSS khi tải trang mà không cần sử dụng bất kỳ JavaScript nào; bạn chỉ cần sử dụng Keyframes CSS3 .

Hãy xem một ví dụ ...

Dưới đây là bản trình diễn menu điều hướng trượt vào vị trí chỉ sử dụng CSS3 :

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}
<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>
Mở rộng đoạn trích

Phá vỡ nó...

Các phần quan trọng ở đây là hình ảnh động khung chính mà chúng ta gọi là slideInFromLeft...

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

... Về cơ bản là "khi bắt đầu, tiêu đề sẽ ở cạnh bên trái của màn hình theo chiều rộng đầy đủ của nó và ở cuối sẽ ở vị trí".

Phần thứ hai gọi slideInFromLefthoạt hình đó :

animation: 1s ease-out 0s 1 slideInFromLeft;

Trên đây là phiên bản tốc ký nhưng đây là phiên bản dài dòng cho rõ ràng:

animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */

Bạn có thể làm tất cả các loại điều thú vị, như trượt nội dung hoặc thu hút sự chú ý đến các khu vực.

Đây là những gì W3C đã nói.

— Chris Spittles
nguồn
20
Điều gì làm cho điều này chạy trên tải trang, và không sớm hơn?
— Rolf
2
Chỉ cần trả lời câu hỏi trên, nó xuất hiện theo mặc định hình ảnh động bắt đầu 0 giây sau khi được áp dụng, không có độ trễ. Có một thuộc tính bổ sung, độ trễ hình ảnh động, có thể được đặt để kiểm soát điều này. Xem: w3.org/TR/css3-animations/#animation-delay-property
— Michael Davis
2
Để đảm bảo hoạt ảnh sẽ bắt đầu sau khi tải tài liệu, hãy đặt mã hoạt hình vào biểu định kiểu bên dưới phần tử cơ thể hoặc thẻ kiểu ở dưới cùng của phần tử cơ thể.
— TaylorMac
@SuzanneEdelmanCreoconcept theo hiểu biết của tôi, IE9 không hỗ trợ thuộc tính chuyển đổi. Các tùy chọn của bạn sẽ là JS hoặc xuống cấp duyên dáng.
— Chris Spittles
1
Câu trả lời tuyệt vời, đã giúp tôi trong năm 2019!
— Gosi
28

Rất ít Javascript là cần thiết:

window.onload = function() {
    document.body.className += " loaded";
}

Bây giờ là CSS:

.fadein {
    opacity: 0;
    -moz-transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
    transition: opacity 1.5s;
}

body.loaded .fadein {
    opacity: 1;
}

Tôi biết câu hỏi "không có Javascript", nhưng tôi nghĩ rằng đáng để chỉ ra rằng có một giải pháp dễ dàng liên quan đến một dòng Javascript.

Nó thậm chí có thể là Javascript nội tuyến, đại loại như thế:

<body onload="document.body.className += ' loaded';" class="fadein">

Đó là tất cả các JavaScript cần thiết.

— Rolf
nguồn
2
Khắc phục một chút: <body onload = "document.body.setAttribution ('class', 'load')">
— Ivan
1
Nếu không cần đợi trang sự kiện onLoad, hãy chèn mã này trước thẻ </ body>: <script type = "text / javascript"> document.body.setAttribution ('class', 'oad'); </ script>
— Ivan
7
Để tránh ghi đè các bodylớp hiện có, hãy sử dụng:document.body.classList.add('loaded)
— Vyacheslav Cotruta
1
Tôi tìm thấy document.body.className += " loaded";được một chút ít tiết cho thêm các loadedlớp đến các lớp học hiện có.
— Pim Schaaf
1
@PimSchaaf Cảm ơn lời đề nghị của bạn, nó hoàn toàn có ý nghĩa. Tôi sẽ chỉnh sửa nó ngay bây giờ. Ngày nay, bạn cũng có thể sử dụng classList thanh lịch hơn một chút (nhưng ít tương thích hơn).
— Rolf
20

Tôi nghĩ rằng tôi đã tìm thấy một loại công việc xung quanh cho câu hỏi OP - thay vì bắt đầu chuyển đổi 'on.load' của trang - Tôi thấy rằng việc sử dụng một hình ảnh động cho độ mờ mờ có hiệu quả tương tự, (tôi đang tìm kiếm điều tương tự như OP).

Vì vậy, tôi muốn làm cho văn bản cơ thể mờ dần từ màu trắng (giống như nền trang web) sang màu văn bản đen khi tải trang - và tôi chỉ mã hóa từ thứ hai vì vậy tôi đang tìm mã mã kiểu 'on.load', nhưng chưa biết về JS - vì vậy đây là mã của tôi hoạt động tốt với tôi. 

#main p {
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

Và vì bất kỳ lý do gì, điều này không hoạt động .classchỉ cho #id(ít nhất là không phải của tôi)

Hy vọng điều này sẽ giúp - như tôi biết trang web này giúp tôi rất nhiều!

— Lee John
nguồn
6

Vâng, đây là một khó khăn.

Câu trả lời là "không thực sự".

CSS không phải là một lớp chức năng. Nó không có bất kỳ nhận thức về những gì xảy ra hoặc khi nào. Nó được sử dụng đơn giản để thêm một lớp trình bày vào các "cờ" khác nhau (các lớp, id, trạng thái).

Theo mặc định, CSS / DOM không cung cấp bất kỳ loại trạng thái "đang tải" nào để CSS sử dụng. Nếu bạn muốn / có thể sử dụng JavaScript, bạn sẽ phân bổ một lớp bodyhoặc một cái gì đó để kích hoạt một số CSS.

Điều đó đang được nói, bạn có thể tạo ra một hack cho điều đó. Tôi sẽ đưa ra một ví dụ ở đây, nhưng nó có thể hoặc không thể áp dụng cho tình huống của bạn.

Chúng tôi đang hoạt động với giả định rằng "đóng" là "đủ tốt":

<html>
<head>
<!-- Reference your CSS here... -->
</head>
<body>
    <!-- A whole bunch of HTML here... -->
    <div class="onLoad">OMG, I've loaded !</div>
</body>
</html>

Đây là một đoạn trích của biểu định kiểu CSS của chúng tôi:

.onLoad
{
    -webkit-animation:bounceIn 2s;
}

Chúng tôi cũng dựa trên giả định rằng các trình duyệt hiện đại hiển thị dần dần, vì vậy phần tử cuối cùng của chúng tôi sẽ hiển thị cuối cùng và do đó CSS ​​này sẽ được kích hoạt sau cùng.

— foxy
nguồn
1

Tương tự như giải pháp của @ Rolf, nhưng bỏ qua tham chiếu đến các chức năng bên ngoài hoặc chơi với lớp. Nếu độ mờ được duy trì ở mức 1 khi được tải, chỉ cần sử dụng tập lệnh nội tuyến để trực tiếp thay đổi độ mờ thông qua kiểu. Ví dụ

<body class="fadein" onload="this.style.opacity=1">

trong đó "fadein" tinh vi CSS được xác định theo @ Rolf, xác định chuyển đổi và đặt độ mờ cho trạng thái ban đầu (tức là 0)

Điều hấp dẫn duy nhất là điều này không hoạt động với các phần tử SPAN hoặc DIV, vì chúng không hoạt động trên sự kiện tải

— người dùng3907296
nguồn
1

bắt đầu với cơ thể lơ lửng hơn Nó sẽ bắt đầu khi chuột di chuyển lần đầu trên màn hình, phần lớn chỉ trong vòng một giây sau khi đến, vấn đề ở đây là nó sẽ đảo ngược khi ra khỏi màn hình.

html:hover #animateelementid, body:hover #animateelementid {rotate ....}

đó là điều tốt nhất tôi có thể nghĩ đến: http://jsfiddle.net/faVLX/

toàn màn hình: http://jsfiddle.net/faVLX/embedded/result/

Chỉnh sửa xem bình luận bên dưới:
Điều này sẽ không hoạt động trên bất kỳ thiết bị màn hình cảm ứng nào vì không có di chuột, vì vậy người dùng sẽ không nhìn thấy nội dung trừ khi họ chạm vào nó. - Bradshaw giàu

— râu
nguồn
Vâng, tôi đã tìm ra điều đó bản thân mình. Đó là một cách giải quyết tốt nếu không có gì khác làm việc. Một phiếu bầu cho điều đó.
— Jens Törnell
13
Đây là một ý tưởng tồi tệ - trên bất kỳ thiết bị màn hình cảm ứng nào không có di chuột, vì vậy người dùng sẽ không nhìn thấy nội dung trừ khi họ chạm vào nó.
— Bradshaw giàu
1

CSS chỉ với độ trễ 3 giây

một vài điểm để thực hiện ở đây:

  • nhiều hình ảnh động trong một cuộc gọi
  • chúng tôi tạo ra một hình ảnh động chờ để chỉ trì hoãn cái thực tế (cái thứ hai trong trường hợp của chúng tôi).

Mã số:

header {
    animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}

@keyframes wait {
    from { transform: translateY(20px); }
    to { transform: translateY(20px); }
}

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
— Claudiu
nguồn
0

Ok tôi đã quản lý để đạt được một hình ảnh động khi tải trang chỉ bằng cách chuyển đổi css (sắp xếp!):

Tôi đã tạo 2 biểu định kiểu css: đầu tiên là cách tôi muốn html được tạo kiểu trước khi hoạt hình ... và thứ hai là cách tôi muốn trang chăm sóc hoạt hình đã được thực hiện.

Tôi hoàn toàn không hiểu làm thế nào tôi đã hoàn thành việc này nhưng nó chỉ hoạt động khi hai tệp css (cả trong phần đầu của tài liệu của tôi) được phân tách bằng một số javascript như sau.

Tôi đã thử nghiệm điều này với Firefox, safari và opera. Đôi khi hoạt hình hoạt động, đôi khi nó chuyển thẳng đến tệp css thứ hai và đôi khi trang dường như đang tải nhưng không có gì được hiển thị (có lẽ đó chỉ là tôi?)

<link media="screen,projection" type="text/css" href="first-css-file.css"  rel="stylesheet" />

<script language="javascript" type="text/javascript" src="../js/jQuery JavaScript Library v1.3.2.js"></script>

<script type='text/javascript'>
$(document).ready(function(){

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
$(".container .menu-text").click(function(){  // Update class to point at the head of the list
});
}
});
</script>

<link media="screen,projection" type="text/css" href="second-css-file.css"  rel="stylesheet" />

Đây là một liên kết đến trang web đang tiến hành của tôi: http://www.hankins-design.co.uk/beta2/test/index.html

Có thể tôi sai nhưng tôi nghĩ các trình duyệt không hỗ trợ chuyển đổi css không nên có bất kỳ vấn đề nào vì chúng nên chuyển thẳng sang tệp css thứ hai mà không bị trì hoãn hoặc thời lượng.

Tôi quan tâm để biết quan điểm về cách công cụ tìm kiếm thân thiện với phương pháp này. Với chiếc mũ đen của tôi, tôi cho rằng tôi có thể lấp đầy một trang bằng các từ khóa và áp dụng độ trễ 9999 cho độ mờ đục của nó.

Tôi rất muốn biết làm thế nào các công cụ tìm kiếm xử lý thuộc tính trì hoãn chuyển đổi và liệu, bằng cách sử dụng phương pháp trên, họ thậm chí sẽ thấy các liên kết và thông tin trên trang.

Quan trọng hơn, tôi thực sự muốn biết tại sao điều này không nhất quán mỗi khi trang tải và làm thế nào tôi có thể khắc phục điều này!

Tôi hy vọng điều này có thể tạo ra một số quan điểm và ý kiến ​​nếu không có gì khác!

— Michael Walkling
nguồn
0

Nếu bất cứ ai khác gặp vấn đề khi thực hiện hai lần chuyển đổi cùng một lúc, thì đây là những gì tôi đã làm. Tôi cần văn bản đến từ trên xuống dưới khi tải trang.

HTML 

<body class="existing-class-name" onload="document.body.classList.add('loaded')">

HTML 

<div class="image-wrapper">
    <img src="db-image.jpg" alt="db-image-name">
    <span class="text-over-image">DB text</span>
</div>

CSS 

.text-over-image {
    position: absolute;
    background-color: rgba(110, 186, 115, 0.8);
    color: #eee;
    left: 0;
    width: 100%;
    padding: 10px;
    opacity: 0;
    bottom: 100%;
    -webkit-transition: opacity 2s, bottom 2s;
    -moz-transition: opacity 2s, bottom 2s;
    -o-transition: opacity 2s, bottom 2s;
    transition: opacity 2s, bottom 2s;
}

body.loaded .text-over-image {
    bottom: 0;
    opacity: 1;
}

Không biết tại sao tôi cứ cố gắng sử dụng 2 khai báo chuyển tiếp trong 1 bộ chọn và (không thực sự) nghĩ rằng nó sẽ sử dụng cả hai.

— s3c
nguồn
0

Giải pháp thậm chí đơn giản hơn (vẫn với javascript [một dòng]:

Sử dụng thẻ này làm thẻ cơ thể: Lưu ý rằng body.hoặc this.không hoạt động đối với tôi. Chỉ cái dài; querySelectorcho phép sử dụng classList.remove(Linux Chromium)

<body class="onload" onload="document.querySelector('body').classList.remove('onload')">

và thêm dòng này lên trên các quy tắc css khác của bạn.

body.onload *{ transform: none !important; }

Xin lưu ý rằng điều này có thể áp dụng cho độ mờ đục (theo yêu cầu của OP [áp phích khác]) chỉ bằng cách sử dụng độ mờ làm công cụ chuyển đổi thay thế. (thậm chí có thể hoạt động trên bất kỳ phán quyết css nào khác theo cùng một cách và bạn có thể sử dụng nhiều lớp để trì hoãn giải thích giữa các lần kích hoạt)

Logic là như nhau. Thực thi không có biến đổi (với :none !importanttất cả các phần tử con của body.onloadvà khi tài liệu được tải, loại bỏ lớp để kích hoạt tất cả các chuyển đổi trên tất cả các phần tử như được chỉ định trong css của bạn.

TRẢ LỜI ĐẦU TIÊN DƯỚI ĐÂY (XEM EDIT TRÊN ĐỂ TRẢ LỜI TRẢ LỜI)

Đây là một giải pháp ngược lại:

  1. Tạo bố cục html của bạn và đặt css phù hợp với kết quả cuối cùng của bạn (với tất cả các chuyển đổi bạn muốn).
  2. Đặt thuộc tính chuyển đổi theo ý thích của bạn
  3. thêm một lớp (ví dụ: Waitload) vào các phần tử bạn muốn chuyển đổi SAU tải. Từ khóa CSS ! Quan trọng là từ khóa ở đây.
  4. Khi tài liệu được tải, sử dụng JS để loại bỏ lớp khỏi các phần tử để bắt đầu chuyển đổi (và loại bỏ quá trình chuyển đổi: không ghi đè).

Hoạt động với nhiều chuyển đổi trên nhiều yếu tố. Không thử tương thích trình duyệt chéo.

#rotated{
    transform : rotate(90deg) /* any other transformation */;
    transition  3s;
}
#translated{
    transform : translate(90px) /* any other transformation */;
    transition  3s;
}
.waitload{
    transform: none !important;
}
<div id='rotated' class='waitload'>
    rotate after load
</div>
<div id='translated' class='waitload'>
    trasnlate after load
</div>
<script type="text/javascript">
     // or body onload ?
    [...document.querySelectorAll('.waitload')]
        .map(e => e.classList.remove('waitload'));

</script>
— Louis Lott Trottier
nguồn
-2

Không thực sự, vì CSS được áp dụng càng sớm càng tốt, nhưng các yếu tố có thể chưa được rút ra. Bạn có thể đoán độ trễ là 1 hoặc 2 giây, nhưng điều này sẽ không phù hợp với hầu hết mọi người, tùy thuộc vào tốc độ internet của họ.

Ngoài ra, nếu bạn muốn làm mờ một cái gì đó chẳng hạn, nó sẽ yêu cầu CSS ẩn nội dung được phân phối. Nếu người dùng không có chuyển tiếp CSS3 thì họ sẽ không bao giờ thấy nó.

Tôi khuyên bạn nên sử dụng jQuery (để dễ sử dụng + bạn có thể muốn thêm hoạt hình cho các UAs khác) và một số JS như thế này: 

$(document).ready(function() {
    $('#id_to_fade_in')
        .css({"opacity":0})   // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!)
        .delay(200)           // Wait for a bit so the user notices it fade in
        .css({"opacity":1});  // Fade it back in. Swap css for animate in legacy browsers if required.
});

Cùng với các hiệu ứng chuyển tiếp được thêm vào trong CSS. Điều này có lợi thế là dễ dàng cho phép sử dụng animate thay vì CSS thứ hai trong các trình duyệt cũ nếu được yêu cầu.

— Bradshaw giàu
nguồn
17
Tại sao câu trả lời này được chấp nhận? Nó không thực sự làm bất cứ điều gì mà câu hỏi yêu cầu. Nó chỉ đơn giản (và rất nhanh, đôi khi không chú ý) bắt đầu phần tử vô hình, đợi phần nhỏ của một giây (200 ms) sau đó ngay lập tức hiển thị lại nó. Đó không phải là một sự mờ nhạt, cuối cùng tôi đã kiểm tra.
— VoidKing
Bạn sẽ bao gồm một chuyển đổi css trên #id_to_fade in, mặc dù tôi đồng ý, điều đó không rõ ràng từ câu trả lời.
— Bradshaw giàu
như trong, thêm một .css khác ({quá trình: 'opacity 2s'}) vào lệnh gọi jQuery? Hay chỉ trong css của bạn? Tôi có cảm giác rằng tôi sẽ cảm thấy như đây là một câu hỏi ngu ngốc ...
— VoidKing
3
Không sao đâu - tôi nên đưa ra một bản demo thực sự. Trong CSS, #id_to_fade_in { -webkit-transition:opacity 0.5s ease-in-out; }+ -o-, -moz-tiền tố là tốt.
— Giàu Bradshaw
2
Đây không phải là câu trả lời được chấp nhận, sử dụng khung hình chính là cách tốt nhất.
— Eduardo Naveda
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.