คำถามติดแท็ก css-transitions

ฉันกำลังพยายามทำให้<ul>ภาพนิ่งโดยใช้การเปลี่ยน CSS เริ่มต้นปิดที่<ul> เมื่อวันที่โฉบสูงมีการตั้งค่าheight: 0; height:auto;อย่างไรก็ตามสิ่งนี้ทำให้เกิดการเปลี่ยนแปลงไม่ใช่แค่การเปลี่ยน ถ้าฉันทำจากheight: 40px;ไปheight: auto;แล้วมันจะเลื่อนขึ้นไปheight: 0;และจากนั้นก็กระโดดไปที่ความสูงที่ถูกต้อง ฉันจะทำสิ่งนี้ได้โดยไม่ต้องใช้ JavaScript? #child0 { height: 0; overflow: hidden; background-color: #dedede; -moz-transition: height 1s ease; -webkit-transition: height 1s ease; -o-transition: height 1s ease; transition: height 1s ease; } #parent0:hover #child0 { height: auto; } #child40 { height: 40px; overflow: hidden; background-color: …

2134 css  css-transitions 

ขณะนี้ฉันกำลังออกแบบเมนู CSS 'mega dropdown' - โดยทั่วไปแล้วเป็นเมนูแบบเลื่อนลง CSS-only ทั่วไป แต่เมนูที่มีเนื้อหาประเภทต่างๆ ในขณะนี้ดูเหมือนว่าการเปลี่ยน CSS 3 จะไม่ใช้กับคุณสมบัติ 'display'นั่นคือคุณไม่สามารถทำการเปลี่ยนแปลงใด ๆ จากdisplay: noneเป็นdisplay: block(หรือชุดค่าผสม) มีวิธีใดบ้างสำหรับเมนูระดับสองจากตัวอย่างด้านบนเพื่อ 'จางหายไป' เมื่อมีคนอยู่เหนือรายการเมนูระดับบนสุดหรือไม่ ฉันทราบว่าคุณสามารถใช้ช่วงการเปลี่ยนภาพได้visibility:แต่ฉันไม่สามารถคิดวิธีการใช้งานได้อย่างมีประสิทธิภาพ ฉันได้ลองใช้ความสูง แต่ก็ล้มเหลวอย่างน่าสังเวช ฉันก็ทราบด้วยว่ามันเป็นเรื่องเล็กน้อยที่จะบรรลุเป้าหมายนี้โดยใช้ JavaScript แต่ฉันต้องการท้าทายตัวเองให้ใช้ CSS เพียงอย่างเดียวและฉันคิดว่าฉันกำลังจะมาถึงในระยะสั้น ๆ

1446 css  css-transitions 

ฉันดูเหมือนจะไม่พบไวยากรณ์ที่ถูกต้องสำหรับชอร์ตเทตการเปลี่ยน CSS ที่มีคุณสมบัติหลายอย่าง นี่ไม่ได้ทำอะไรเลย: .element { -webkit-transition: height .5s, opacity .5s .5s; -moz-transition: height .5s, opacity .5s .5s; -ms-transition: height .5s, opacity .5s .5s; transition: height .5s, opacity .5s .5s; height: 0; opacity: 0; overflow: 0; } .element.show { height: 200px; opacity: 1; } ฉันเพิ่มคลาสการแสดงด้วยจาวาสคริปต์ องค์ประกอบจะสูงขึ้นและมองเห็นได้ แต่ไม่เปลี่ยน ทดสอบใน Chrome, FF …

519 css  webkit  css-transitions  shorthand 

การเปลี่ยน CSS สามารถใช้เพื่ออนุญาตให้ย่อหน้าข้อความจางในการโหลดหน้า? ฉันชอบวิธีที่มันดูบนhttp://dotmailapp.com/และชอบที่จะใช้เอฟเฟกต์ที่คล้ายกันโดยใช้ CSS โดเมนได้ถูกซื้อไปแล้วและไม่มีผลกระทบจากการกล่าวถึงอีกต่อไป สำเนาที่เก็บถาวรสามารถดูได้บนเครื่อง Waybackบนเครื่อง ภาพประกอบ มีมาร์กอัปนี้: <div id="test"> <p>​This is a test</p> </div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ ด้วยกฎ CSS ต่อไปนี้: #test p { opacity: 0; margin-top: 25px; font-size: 21px; text-align: center; -webkit-transition: opacity 2s ease-in; -moz-transition: opacity 2s ease-in; -o-transition: opacity 2s ease-in; -ms-transition: opacity 2s ease-in; transition: opacity 2s …

442 css  css-transitions  opacity 

เป็นคำถามที่ค่อนข้างตรงไปตรงมา แต่ฉันไม่สามารถหาเอกสารที่ดีเกี่ยวกับคุณสมบัติการเปลี่ยน CSS ได้ นี่คือตัวอย่าง CSS: .nav a { text-transform:uppercase; text-decoration:none; color:#d3d3d3; line-height:1.5 em; font-size:.8em; display:block; text-align:center; text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15); -webkit-transition: color .2s linear; -moz-transition: color .2s linear; -o-transition: color .2s linear; transition: color .2s linear; -webkit-transition: text-shadow .2s linear; -moz-transition: text-shadow .2s linear; -o-transition: …

327 animation  css  css-transitions 

ฉันกำลังพยายามเปลี่ยนผ่านโฮเวอร์ด้วย css เหนือรูปขนาดย่อเพื่อให้โฮเวอร์พื้นหลังไล่ระดับสีจางหายไปการเปลี่ยนแปลงไม่ทำงาน แต่ถ้าฉันเปลี่ยนเป็นrgba()ค่ามันก็ใช้ได้ดี ไม่รองรับการไล่ระดับสี? ฉันลองใช้ภาพด้วยเช่นกันมันจะไม่เปลี่ยนภาพเหมือนกัน ฉันรู้ว่าเป็นไปได้เช่นเดียวกับที่โพสต์มีคนทำ แต่ฉันไม่สามารถทราบได้อย่างแม่นยำ ความช่วยเหลือใด ๆ > นี่คือ CSS บางส่วนที่จะทำงานกับ: #container div a { -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear; position: absolute; width: 200px; height: 150px; border: 1px #000 solid; margin: 30px; z-index: 2 } #container …

215 css  gradient  css-transitions 

เป็นไปได้ไหมที่จะใช้ภาพเคลื่อนไหวการเปลี่ยน CSS3 ในการโหลดหน้าเว็บโดยไม่ใช้ Javascript นี่คือสิ่งที่ฉันต้องการ แต่ในการโหลดหน้า: http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html สิ่งที่ฉันพบจนถึง CSS3 transition-delay , หนทางในการหน่วงเอฟเฟกต์กับองค์ประกอบต่างๆ ใช้งานได้เฉพาะเมื่อวางเมาส์เหนือ CSS3 Keyframeทำงานได้ดี แต่ช้ามาก ไม่มีประโยชน์เพราะสิ่งนั้น การเปลี่ยน CSS3นั้นเร็วพอ แต่อย่าเคลื่อนไหวเมื่อโหลดหน้าเว็บ

196 css  webkit  css-transitions  css-animations 

มีเหตุการณ์ใดที่องค์ประกอบถูกไล่ออกเพื่อตรวจสอบว่าการเปลี่ยนแปลง css3 เริ่มขึ้นหรือสิ้นสุดลงหรือไม่?

190 javascript  events  css  transition  css-transitions 

มีโซลูชันข้ามเบราว์เซอร์เพื่อสร้างการเปลี่ยนสไลด์ในโดยใช้ CSS เท่านั้นไม่มีจาวาสคริปต์หรือไม่ ด้านล่างเป็นตัวอย่างของเนื้อหา HTML: <div> <img id="slide" src="http://.../img.jpg /> </div>

177 css  css-transitions 

ดังนั้นฉันเข้าใจวิธีการเปลี่ยนทั้ง CSS3 และภาพเคลื่อนไหว สิ่งที่ไม่ชัดเจนและฉัน googled คือเมื่อใดที่จะใช้ ตัวอย่างเช่นถ้าฉันต้องการตีกลับเป็นที่ชัดเจนว่าภาพเคลื่อนไหวเป็นวิธีที่จะไป ฉันสามารถให้คีย์เฟรมและเบราว์เซอร์จะทำเฟรมตัวกลางและฉันจะมีภาพเคลื่อนไหวที่ดี อย่างไรก็ตามมีบางกรณีที่สามารถใช้เอฟเฟกต์ดังกล่าวได้ทั้งสองวิธี ตัวอย่างที่ง่ายและทั่วไปจะใช้เมนูเลื่อนลิ้นชักสไตล์ Facebook: เอฟเฟกต์นี้สามารถทำได้โดยการเปลี่ยนผ่านดังนี้: .sf-page { -webkit-transition: -webkit-transform .2s ease-out; } .sf-page.out { -webkit-transform: translateX(240px); } http://jsfiddle.net/NwEGz/ หรือผ่านภาพเคลื่อนไหวเช่นนั้น: .sf-page { -webkit-animation-duration: .4s; -webkit-transition-timing-function: ease-out; } .sf-page.in { -webkit-animation-name: sf-slidein; -webkit-transform: translate3d(0, 0, 0); } .sf-page.out { -webkit-animation-name: sf-slideout; -webkit-transform: translateX(240px); } @-webkit-keyframes …

157 css  css-transitions  css-animations 

ฉันกำลังพยายามสร้างเอฟเฟกต์ "จางหายไป" โดยใช้การเปลี่ยน CSS แต่ฉันไม่สามารถใช้งานกับภาพพื้นหลังได้ ... CSS: .title a { display: block; width: 340px; height: 338px; color: black; background: transparent; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; } .title a:hover { background: transparent; background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat; /* TRANSITION */ -webkit-transition: background 1s; …

122 css  background  background-image  css-transitions 

ดังนั้นฉันจึงมีการเปลี่ยน css ต่อไปนี้ที่แนบมากับองค์ประกอบ: a { -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ; -moz-transition:color 0.1s ease-in, background-color 0.1s ease-in; -o-transition:color 0.1s ease-in, background-color 0.1s ease-in; transition:color 0.1s ease-in, background-color 0.1s ease-in; } มีวิธีปิดการใช้งานช่วงการเปลี่ยนภาพที่สืบทอดมาในองค์ประกอบเฉพาะหรือไม่? a.tags { transition: none; } ดูเหมือนจะไม่ได้ทำงาน

117 css  transitions  css-transitions 

.item:hover { zoom: 1; filter: alpha(opacity=50); opacity: 0.5; -webkit-transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -ms-transition: opacity .15s ease-in-out; -o-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; } เหตุใดสิ่งนี้จึงเคลื่อนไหวเฉพาะความทึบเมื่อฉันวางเมาส์ไว้ แต่ไม่ใช่เมื่อฉันปล่อยวัตถุด้วยเมาส์ สาธิตที่นี่: http://jsfiddle.net/7uR8z/ ​

115 css  css-transitions 

ความแตกต่างระหว่างการเปลี่ยน CSS3 ฯease-in, ease-outฯลฯ ?

114 css  css-transitions 

ฉันต้องการใช้การเปลี่ยน CSS กับคุณสมบัติทั้งหมดนอกเหนือจากตำแหน่งพื้นหลัง ฉันพยายามทำด้วยวิธีนี้: .csstransitions a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .csstransitions a { -webkit-transition: background-position 0s ease 0s; -moz-transition: background-position 0s ease 0s; -o-transition: background-position 0s ease 0s; -ms-transition: background-position 0s ease …

109 css  css-transitions