ภาพเคลื่อนไหวการเปลี่ยนแปลง css3 ในการโหลด?

196

เป็นไปได้ไหมที่จะใช้ภาพเคลื่อนไหวการเปลี่ยน CSS3 ในการโหลดหน้าเว็บโดยไม่ใช้ Javascript

นี่คือสิ่งที่ฉันต้องการ แต่ในการโหลดหน้า:

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

สิ่งที่ฉันพบจนถึง

  • CSS3 transition-delay , หนทางในการหน่วงเอฟเฟกต์กับองค์ประกอบต่างๆ ใช้งานได้เฉพาะเมื่อวางเมาส์เหนือ
  • CSS3 Keyframeทำงานได้ดี แต่ช้ามาก ไม่มีประโยชน์เพราะสิ่งนั้น
  • การเปลี่ยน CSS3นั้นเร็วพอ แต่อย่าเคลื่อนไหวเมื่อโหลดหน้าเว็บ
css  webkit  css-transitions  css-animations 
— Jens Törnell
แหล่งที่มา
@blesh: เกือบทุกอย่าง - ดูตัวอย่างเช่นmysociety.org/2011/08/11/mobile-operators-breaking-contentและrobertnyman.com/2006/04/25/…
— NickFitz
2
Keyframes จะทำสิ่งนี้ให้สำเร็จและมอบทางเลือกที่ดีที่สุดเมื่อไม่รองรับภาพเคลื่อนไหว CSS3 ทำไมคุณคิดว่ามันช้าเกินไป
— zachleat
Hi! ลิงค์เสียแล้วและฉันไม่รู้ว่ามันจะไปที่ไหนเพื่อให้ใครบางคนสามารถแก้ไขได้โปรด!
— Linux4Life531

คำตอบ:

460

คุณสามารถเรียกใช้ภาพเคลื่อนไหวCSSในการโหลดหน้าโดยไม่ต้องใช้ JavaScript ใด ๆ คุณเพียงแค่ต้องใช้CSS3 คีย์เฟรม

ลองดูตัวอย่าง ...

นี่คือตัวอย่างของเมนูนำทางที่เลื่อนเข้ามาโดยใช้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>
ขยายตัวอย่างข้อมูล

ทำลายมันลง...

ส่วนที่สำคัญคือภาพเคลื่อนไหวของเฟรมภาพที่เราเรียกว่าslideInFromLeft...

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

... ซึ่งโดยทั่วไปบอกว่า "ในตอนแรกส่วนหัวจะถูกปิดขอบด้านซ้ายของหน้าจอด้วยความกว้างเต็มและที่ส่วนท้ายจะเข้าที่"

ส่วนที่สองเรียกslideInFromLeftภาพเคลื่อนไหวนั้น:

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

ด้านบนเป็นรุ่นชวเลข แต่ที่นี่เป็นรุ่น verbose เพื่อความชัดเจน:

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 */

คุณสามารถทำสิ่งต่าง ๆ ที่น่าสนใจเช่นเลื่อนเนื้อหาหรือดึงความสนใจไปยังพื้นที่

นี่คือสิ่งที่ W3C พูด

— Chris Spittles
แหล่งที่มา
20
อะไรที่ทำให้การโหลดหน้านี้ไม่ได้เร็วไปกว่านี้?
— Rolf
2
เพียงเพื่อตอบคำถามข้างต้นมันจะปรากฏขึ้นตามค่าเริ่มต้นแล้วภาพเคลื่อนไหวจะเริ่มต้น 0 วินาทีหลังจากนำไปใช้โดยไม่ล่าช้า มีคุณสมบัติเพิ่มเติมคือภาพเคลื่อนไหวล่าช้าซึ่งสามารถตั้งค่าให้ควบคุมสิ่งนี้ได้ ดู: w3.org/TR/css3-animations/#animation-delay-property
— Michael Davis
2
เพื่อให้แน่ใจว่าภาพเคลื่อนไหวจะเริ่มหลังจากโหลดเอกสารให้วางรหัสภาพเคลื่อนไหวในสไตล์ชีทด้านล่างองค์ประกอบร่างกายหรือแท็กสไตล์ที่ด้านล่างขององค์ประกอบร่างกาย
— TaylorMac
@SuzanneEdelmanCreocon ยอมรับความรู้ของฉัน IE9 ไม่สนับสนุนคุณสมบัติการเปลี่ยนแปลง ตัวเลือกของคุณจะเป็น JS หรือการย่อยสลายที่สง่างาม
— Chris Spittles
1
คำตอบที่ยอดเยี่ยมได้ช่วยฉันในปี 2019!
— Gosi
28

จำเป็นต้องใช้ Javascript น้อยมาก:

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

ตอนนี้ 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;
}

ฉันรู้คำถามที่ว่า "ไม่มี Javascript" แต่ฉันคิดว่ามันคุ้มค่าที่จะชี้ให้เห็นว่ามีวิธีแก้ปัญหาอย่างง่ายเกี่ยวกับ Javascript หนึ่งบรรทัด

มันอาจเป็น Javascript แบบอินไลน์เช่นนี้:

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

นั่นคือจาวาสคริปต์ทั้งหมดที่จำเป็น

— Rolf
แหล่งที่มา
2
แก้ไขเล็กน้อย: <body onload = "document.body.setAttribute ('class', 'load')">
— Ivan
1
หากไม่จำเป็นต้องรอหน้ากิจกรรมโหลดให้ใส่รหัสนี้ก่อนแท็ก </body>: <script type = "text / javascript"> document.body.setAttribute ('class', 'load'); </script>
— อีวาน
7
เพื่อหลีกเลี่ยงการแทนที่bodyคลาสที่มีอยู่ให้ใช้:document.body.classList.add('loaded)
— Vyacheslav Cotruta
1
ผมพบว่าdocument.body.className += " loaded";จะเป็นน้อยอย่างละเอียดสำหรับการเพิ่มloadedระดับชั้นเรียนที่มีอยู่
— Pim Schaaf
1
@PimSchaaf ขอบคุณสำหรับคำแนะนำของคุณมันสมเหตุสมผลแล้ว ฉันจะแก้ไขทันที ทุกวันนี้คุณสามารถใช้ classList ซึ่งมีความสง่างามกว่าเล็กน้อย (แต่เข้ากันได้น้อยกว่า)
— Rolf
21

ฉันคิดว่าฉันพบคำถามประเภท OP - แทนที่จะเริ่มต้นการเปลี่ยน 'on.load' ของหน้า - ฉันพบว่าการใช้ภาพเคลื่อนไหวสำหรับความทึบจางหายไปมีผลเช่นเดียวกัน (ฉันกำลังมองหา สิ่งเดียวกันกับ OP)

ดังนั้นฉันจึงต้องการให้เนื้อความจางหายไปจากสีขาว (เหมือนกับพื้นหลังของไซต์) เป็นสีตัวอักษรสีดำในการโหลดหน้า - และฉันเพิ่งได้รับการเข้ารหัสตั้งแต่วันจันทร์ดังนั้นฉันจึงมองหารหัสลักษณะ 'on.load' แต่ยังไม่รู้จัก JS - ดังนั้นนี่คือรหัสของฉันที่ทำงานได้ดีสำหรับฉัน 

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

และไม่ว่าด้วยเหตุผลใดก็ตามสิ่งนี้ไม่ได้ผลสำหรับ.classเพียง#id(อย่างน้อยก็ไม่ต้องอยู่ในเหมือง)

หวังว่านี่จะช่วยได้ - เพราะฉันรู้ว่าเว็บไซต์นี้ช่วยฉันได้มาก!

— ลีจอห์น
แหล่งที่มา
6

นี่เป็นสิ่งที่ยุ่งยาก

คำตอบคือ "ไม่จริง"

CSS ไม่ใช่เลเยอร์ที่ใช้งานได้ มันไม่ได้ตระหนักถึงสิ่งที่เกิดขึ้นหรือเมื่อใด มันใช้เพื่อเพิ่มการนำเสนอเท่านั้นเลเยอร์แบบไปยัง "แฟล็ก" ที่แตกต่างกัน (คลาส, รหัส, สถานะ)

โดยค่าเริ่มต้น CSS / DOM ไม่ได้ระบุสถานะ "on load" ใด ๆ สำหรับ CSS ที่จะใช้ หากคุณต้องการ / สามารถใช้ JavaScript ได้คุณจะต้องจัดสรรคลาสให้bodyหรือเพื่อเปิดใช้งาน CSS บางอย่าง

อย่างที่กล่าวไว้คุณสามารถสร้างแฮ็คได้ ฉันจะให้ตัวอย่างที่นี่ แต่อาจหรือไม่อาจใช้กับสถานการณ์ของคุณ

เรากำลังดำเนินการโดยตั้งสมมติฐานว่า "ปิด" คือ "ดีพอ":

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

นี่เป็นข้อความที่ตัดตอนมาจากสไตล์ชีท CSS ของเรา:

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

นอกจากนี้เรายังตั้งสมมติฐานว่าเบราว์เซอร์สมัยใหม่จะแสดงผลอย่างต่อเนื่องดังนั้นองค์ประกอบสุดท้ายของเราจะแสดงผลสุดท้ายดังนั้น CSS นี้จะเปิดใช้งานล่าสุด

— คร่ำ
แหล่งที่มา
1

คล้ายกับโซลูชันของ @ Rolf แต่ข้ามการอ้างอิงไปยังฟังก์ชั่นภายนอกหรือเล่นกับคลาส หากความทึบคงอยู่ที่ 1 เพียงครั้งเดียวให้โหลดเพียงใช้สคริปต์อินไลน์เพื่อเปลี่ยนความทึบผ่านสไตล์โดยตรง ตัวอย่างเช่น

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

โดยที่ CSS sytle "fadein" ถูกกำหนดต่อ @ Rolf กำหนดการเปลี่ยนและตั้งค่าความทึบสู่สถานะเริ่มต้น (เช่น 0)

catch เท่านั้นคือสิ่งนี้ไม่ทำงานกับองค์ประกอบ SPAN หรือ DIV เนื่องจากพวกเขาไม่ได้ทำงานเหตุการณ์ onload

— user3907296
แหล่งที่มา
1

เริ่มต้นด้วยการวางตัวของลำตัวมากกว่ามันจะเริ่มเมื่อเมาส์เคลื่อนที่บนหน้าจอครั้งแรกซึ่งส่วนใหญ่ภายในไม่กี่วินาทีหลังจากมาถึงปัญหาที่นี่คือมันจะย้อนกลับเมื่อออกจากหน้าจอ

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

นั่นคือสิ่งที่ดีที่สุดที่ฉันนึกได้: http://jsfiddle.net/faVLX/

เต็มหน้าจอ: http://jsfiddle.net/faVLX/embedded/result/

แก้ไขดูความคิดเห็นด้านล่าง:
สิ่งนี้จะไม่ทำงานบนอุปกรณ์หน้าจอสัมผัสใด ๆ เนื่องจากไม่มีโฮเวอร์ดังนั้นผู้ใช้จะไม่เห็นเนื้อหาเว้นแต่จะแตะ - แบรดชอว์ริช

— beardhatcode
แหล่งที่มา
ใช่ฉันคิดเอง มันเป็นวิธีแก้ปัญหาที่ตกลงถ้าไม่มีอะไรทำงาน หนึ่งคะแนนสำหรับสิ่งนั้น
— Jens Törnell
13
นี่เป็นความคิดที่แย่มาก - บนอุปกรณ์หน้าจอสัมผัสใด ๆ ไม่มีโฮเวอร์ดังนั้นผู้ใช้จะไม่เห็นเนื้อหาเว้นแต่จะแตะ
— Rich Bradshaw
1

CSS เท่านั้นที่มีความล่าช้า 3 วินาที

บางจุดที่จะใช้ที่นี่:

  • ภาพเคลื่อนไหวหลายภาพในสายเดียว
  • เราสร้างอนิเมชั่นการรอคอยซึ่งเพิ่งจะหน่วงเวลาของจริง (อันที่สองในกรณีของเรา)

รหัส:

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
แหล่งที่มา
0

ตกลงฉันจัดการเพื่อให้บรรลุภาพเคลื่อนไหวเมื่อหน้าโหลดโดยใช้การเปลี่ยน CSS เท่านั้น (เรียงลำดับจาก!):

ฉันสร้างสไตล์ชีต css 2 อัน: อันแรกคือวิธีที่ฉันต้องการสไตล์ html ก่อนที่จะเคลื่อนไหว ... และอย่างที่สองคือวิธีที่ฉันต้องการให้เพจดูแลภาพเคลื่อนไหว

ฉันไม่เข้าใจว่าฉันได้ทำสิ่งนี้อย่างไร แต่จะใช้งานได้เมื่อไฟล์ css สองไฟล์ (ทั้งสองในส่วนหัวของเอกสารของฉัน) ถูกคั่นด้วย javascript บางส่วนดังนี้

ฉันได้ทำการทดสอบกับ Firefox ซาฟารีและโอเปร่าแล้ว บางครั้งแอนิเมชั่นทำงานบางครั้งมันข้ามไปยังไฟล์ css ที่สองโดยตรงและบางครั้งหน้าดูเหมือนว่าจะโหลด แต่ไม่มีอะไรแสดง (บางทีอาจเป็นแค่ฉันเหรอ?)

<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" />

นี่คือลิงค์ไปยังเว็บไซต์ที่กำลังดำเนินการอยู่: http://www.hankins-design.co.uk/beta2/test/index.html

บางทีฉันผิด แต่ฉันคิดว่าเบราว์เซอร์ที่ไม่รองรับการเปลี่ยน css ไม่ควรมีปัญหาใด ๆ เนื่องจากควรข้ามไปยังไฟล์ css ที่สองโดยไม่ล่าช้าหรือระยะเวลา

ฉันสนใจที่จะทราบมุมมองเกี่ยวกับวิธีที่เครื่องมือค้นหานี้เป็นมิตร ด้วยหมวกสีดำของฉันที่ฉันคิดว่าฉันสามารถกรอกหน้าด้วยคำหลักและใช้ความล่าช้า 9999s กับความทึบของมัน

ฉันสนใจที่จะทราบว่าเครื่องมือค้นหาจัดการกับคุณลักษณะการเปลี่ยนแปลงการหน่วงเวลาหรือไม่และหากใช้วิธีการด้านบนพวกเขาจะเห็นลิงก์และข้อมูลในหน้านั้นหรือไม่

ที่สำคัญฉันอยากรู้ว่าทำไมมันจึงไม่สอดคล้องกันทุกครั้งที่โหลดหน้าเว็บและฉันจะแก้ไขได้อย่างไร!

ฉันหวังว่าสิ่งนี้สามารถสร้างมุมมองและความคิดเห็นถ้าไม่มีอะไร!

— Michael Walkling
แหล่งที่มา
0

หากใครมีปัญหาในการเปลี่ยนสองครั้งพร้อมกันนี่คือสิ่งที่ฉันทำ ฉันต้องการข้อความที่จะมาจากบนลงล่างในการโหลดหน้า

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;
}

ไม่ทราบว่าทำไมฉันจึงพยายามใช้การประกาศการเปลี่ยนแปลง 2 รายการใน 1 ตัวเลือกและ (ไม่จริง ๆ ) คิดว่ามันจะใช้ทั้งสองอย่าง

— s3c
แหล่งที่มา
0

แม้แต่วิธีที่ง่ายกว่า (ยังมี [จาวาสคริปต์หนึ่งบรรทัด]):

ใช้สิ่งนี้เป็นแท็กเนื้อหา: โปรดทราบว่าbody.หรือใช้งานthis.ไม่ได้สำหรับฉัน ยาวเท่านั้น querySelectorอนุญาตให้ใช้classList.remove(Linux Chromium)

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

และเพิ่มบรรทัดนี้ที่ด้านบนของกฎ CSS อื่น ๆ ของคุณ

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

โปรดทราบว่าสิ่งนี้สามารถนำไปใช้กับความทึบ (ตามที่ร้องขอโดย OP [โปสเตอร์อื่น ๆ ]) เพียงแค่ใช้ความทึบแสงเป็นทริกเกอร์การเปลี่ยนแทน (อาจทำงานกับการพิจารณาของ css อื่น ๆ ในลักษณะเดียวกันและคุณสามารถใช้หลายคลาสสำหรับการอธิบายล่าช้าระหว่างการเรียกใช้)

ตรรกะเหมือนกัน บังคับใช้การแปลง (ด้วย:none !importantอิลิเมนต์ลูกทั้งหมดของbody.onloadและเมื่อเอกสารถูกโหลดลบคลาสเพื่อทริกเกอร์การเปลี่ยนแปลงทั้งหมดบนอิลิเมนต์ทั้งหมดตามที่ระบุใน css ของคุณ

คำตอบแรกข้างล่าง (ดูการแก้ไขข้างต้นสำหรับคำตอบสั้น ๆ )

นี่คือวิธีแก้ปัญหาย้อนกลับ:

  1. สร้างเลย์เอาต์ html ของคุณและตั้งค่า css ตามผลลัพธ์สุดท้ายของคุณ (พร้อมการแปลงทั้งหมดที่คุณต้องการ)
  2. ตั้งค่าคุณสมบัติการเปลี่ยนแปลงตามความชอบของคุณ
  3. เพิ่มคลาส (เช่น: waitload) ให้กับองค์ประกอบที่คุณต้องการแปลงโหลดหลัง คำหลัก CSS ! สำคัญคือคำสำคัญที่นี่
  4. เมื่อโหลดเอกสารแล้วให้ใช้ JS เพื่อลบคลาสออกจากอิลิเมนต์เป็นเพื่อเริ่มการแปลง (และลบการเปลี่ยนแปลง: ไม่มีการแทนที่)

ทำงานร่วมกับการเปลี่ยนแปลงหลายครั้งในหลายองค์ประกอบ ไม่ลองใช้การทำงานร่วมกันข้ามเบราว์เซอร์

#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 Loudog Trottier
แหล่งที่มา
-2

ไม่จริงเพราะ CSS ถูกนำไปใช้โดยเร็วที่สุด แต่องค์ประกอบอาจยังไม่ถูกดึงออกมา คุณสามารถเดาได้ว่าการหน่วงเวลา 1 หรือ 2 วินาที แต่สิ่งนี้จะไม่เหมาะกับคนส่วนใหญ่ขึ้นอยู่กับความเร็วของอินเทอร์เน็ต

นอกจากนี้หากคุณต้องการลบบางสิ่งบางอย่างในอินสแตนซ์มันจะต้องมี CSS ที่ซ่อนเนื้อหาที่จะส่งมอบ หากผู้ใช้ไม่มีการเปลี่ยน CSS3 พวกเขาจะไม่เห็นมัน

ฉันขอแนะนำให้ใช้ jQuery (เพื่อความสะดวกในการใช้ + คุณอาจต้องการเพิ่มแอนิเมชันสำหรับ UAs อื่น ๆ ) และ JS บางตัวเช่นนี้: 

$(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.
});

พร้อมกับการเปลี่ยนเพิ่มใน CSS นี่เป็นข้อดีของการอนุญาตให้ใช้ภาพเคลื่อนไหวแทน CSS ที่สองในเบราว์เซอร์รุ่นเก่าได้อย่างง่ายดายหากต้องการ

— แบรดชอว์รวย
แหล่งที่มา
17
ทำไมคำตอบนี้จึงเป็นที่ยอมรับ มันไม่ได้ทำอะไรตามที่ถามมาจริงๆ มันเพียง (และเร็วมากบางครั้งโดยไม่สังเกตเห็น) เริ่มองค์ประกอบที่มองไม่เห็นรอเศษเสี้ยวเล็ก ๆ ของวินาที (200 มิลลิวินาที) จากนั้นแสดงผลทันทีที่มองเห็นอีกครั้ง นั่นไม่ใช่จางสุดท้ายฉันตรวจสอบ
— VoidKing
คุณจะรวมการเปลี่ยนแปลง css กับ#id_to_fade inแม้ว่าฉันเห็นด้วยที่ไม่ชัดเจนจากคำตอบ
— Rich Bradshaw
เช่นเดียวกับเพิ่ม. css อีก {(เปลี่ยน: 'opacity 2s'}) ไปยังการเรียก jQuery? หรือเพียงแค่ใน css ของคุณ? ฉันมีความรู้สึกว่าฉันจะรู้สึกเช่นนี้เป็นคำถามที่โง่ ...
— VoidKing
3
ไม่เป็นไร - ฉันควรจะทำการทดลองจริง ๆ ใน CSS, #id_to_fade_in { -webkit-transition:opacity 0.5s ease-in-out; }+ -o-, -moz-คำนำหน้าเช่นกัน
— Rich Bradshaw
2
นี่ไม่ควรเป็นคำตอบที่ยอมรับได้การใช้คีย์เฟรมเป็นวิธีที่จะไป
— Eduardo Naveda
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.