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

ฉันใช้งานแอนิเมชั่นกับองค์ประกอบบางอย่างที่ตั้งค่าไว้opacity: 0;ใน CSS คลาสแอนิเมชั่นถูกนำไปใช้กับคลิกและโดยใช้คีย์เฟรมมันจะเปลี่ยนความทึบจาก0เป็น1(เหนือสิ่งอื่นใด) น่าเสียดายที่เมื่อภาพเคลื่อนไหวจบลงองค์ประกอบจะกลับไปที่opacity: 0(ทั้ง Firefox และ Chrome) ความคิดตามธรรมชาติของฉันคือองค์ประกอบที่มีภาพเคลื่อนไหวยังคงอยู่ในสถานะสุดท้ายโดยเอาชนะคุณสมบัติดั้งเดิมของพวกเขา สิ่งนี้ไม่จริงหรือ และถ้าไม่ฉันจะทำให้องค์ประกอบทำเช่นนั้นได้อย่างไร รหัส (ไม่รวมรุ่นนำหน้า): @keyframes bubble { 0% { transform:scale(0.5); opacity:0.0; } 50% { transform:scale(1.2); opacity:0.5; } 100% { transform:scale(1.0); opacity:1.0; } }

301 css  css-animations 

ขณะนี้ฉันมีรหัสนี้: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } มันกะพริบ แต่จะกะพริบเฉพาะใน "ทิศทางเดียว" ฉันหมายความว่ามันจะจางหายไปเท่านั้นและจากนั้นก็ปรากฏขึ้นopacity: 1.0อีกครั้งจากนั้นก็จางหายไปปรากฏขึ้นอีกครั้งและอื่น ๆ ... ผมอยากให้มันหายไปแล้ว "เพิ่ม" opacity: 1.0จากจางนี้กลับมาอีกครั้งเพื่อ เป็นไปได้ไหม

288 html  css  css-animations  opacity 

เป็นไปได้ไหมที่จะใช้ภาพเคลื่อนไหวการเปลี่ยน 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 4 ส่วนที่เล่นอยู่บนการคลิก - แต่ส่วนสุดท้ายของภาพเคลื่อนไหวนั้นมีจุดประสงค์เพื่อนำมันออกจากหน้าจอ อย่างไรก็ตามมันจะกลับไปสู่สถานะดั้งเดิมเสมอเมื่อเล่นแล้ว ใคร ๆ ก็รู้ว่าฉันจะหยุดมันได้อย่างไรในเฟรม css สุดท้าย (100%)หรืออื่น ๆ วิธีกำจัด div ทั้งหมดในครั้งเดียวที่มันเล่น @keyframes colorchange { 0% { transform: scale(1.0) rotate(0deg); } 50% { transform: rotate(340deg) translate(-300px,0px) } 100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); } }

181 css  css-animations 

ฉันได้ดูการสาธิตไม่กี่ครั้งและไม่รู้ว่าทำไมฉันไม่สามารถหมุน CSS3 เพื่อใช้งานได้ ฉันใช้ Chrome รุ่นเสถียรล่าสุด ซอ: http://jsfiddle.net/9Ryvs/1/ div { margin: 20px; width: 100px; height: 100px; background: #f00; -webkit-animation-name: spin; -webkit-animation-duration: 40000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 40000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 40000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-transition: rotate(3600deg); } <div></div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล

158 css  css-animations 

ดังนั้นฉันเข้าใจวิธีการเปลี่ยนทั้ง 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 

ฉันต้องการทำให้ชิ้นส่วนของข้อความกะพริบสไตล์โรงเรียนเก่าโดยไม่ใช้ javascript หรือตกแต่งข้อความ ไม่มีช่วงการเปลี่ยนภาพเท่านั้น * กะพริบ *, * กะพริบ *, * กะพริบ *! แก้ไข : นี่แตกต่างจากคำถามนั้นเพราะฉันขอให้กระพริบโดยไม่มีการเปลี่ยนอย่างต่อเนื่องในขณะที่ OP ของคำถามอื่นถามว่าจะแทนที่กระพริบด้วยการเปลี่ยนอย่างต่อเนื่อง

149 html  css  css-animations  blink 

ดูเหมือนว่ามีการอัปเดตล่าสุดสำหรับ Google Chrome ซึ่งทำให้ข้อความไม่ชัดหลังจากทำไฟล์transform: scale(). โดยเฉพาะฉันกำลังทำสิ่งนี้: @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } หากคุณไปที่http://rourkery.comใน Chrome คุณจะเห็นปัญหาในพื้นที่ข้อความหลัก ไม่เคยทำเช่นนี้และดูเหมือนจะไม่มีผลกับเบราว์เซอร์ webkit อื่น ๆ (เช่น Safari) มีโพสต์อื่น ๆ เกี่ยวกับผู้ที่ประสบปัญหาคล้ายกันกับการแปลง 3 มิติ แต่ไม่พบอะไรเกี่ยวกับการแปลง 2 …

130 google-chrome  css  webkit  transform  css-animations 

ฉันจะมีภาพเคลื่อนไหว CSS สองภาพที่เล่นด้วยความเร็วที่ต่างกันได้อย่างไร ภาพควรหมุนและเติบโตไปพร้อม ๆ กัน การหมุนจะวนทุกๆ 2 วินาที การเจริญเติบโตจะหมุนเวียนทุกๆ 4 วินาที ตัวอย่างรหัส: .image { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin:-60px 0 0 -60px; -webkit-animation:spin 2s linear infinite; -webkit-animation:scale 4s linear infinite; } @-webkit-keyframes spin { 100% { transform: rotate(180deg); } } @-webkit-keyframes scale { …

120 css  css-animations 

สิ่งที่เรียบง่ายนี้ควรทำได้อย่างง่ายดาย แต่ฉันกำลังดึงผมออกว่ามันซับซ้อนแค่ไหน สิ่งที่ฉันต้องการทำคือทำให้การติดตั้งและการยกเลิกการต่อเชื่อมคอมโพเนนต์ React เป็นแบบเคลื่อนไหว นี่คือสิ่งที่ฉันได้ลองทำไปแล้วและสาเหตุที่แต่ละวิธีใช้ไม่ได้ผล: ReactCSSTransitionGroup - ฉันไม่ได้ใช้คลาส CSS เลยมันเป็นสไตล์ JS ทั้งหมดดังนั้นจึงใช้ไม่ได้ ReactTransitionGroup- API ระดับล่างนี้ยอดเยี่ยม แต่คุณต้องใช้การโทรกลับเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์ดังนั้นเพียงแค่ใช้การเปลี่ยน CSS จะไม่ทำงานที่นี่ มีไลบรารีแอนิเมชั่นอยู่เสมอซึ่งนำไปสู่ประเด็นต่อไป: GreenSock - การออกใบอนุญาตมีข้อ จำกัด มากเกินไปสำหรับการใช้งานทางธุรกิจ IMO React Motion - ดูเหมือนจะดี แต่TransitionMotionก็สับสนและซับซ้อนเกินไปสำหรับสิ่งที่ฉันต้องการ แน่นอนว่าฉันสามารถใช้กลอุบายได้เช่นเดียวกับ UI ของวัสดุโดยที่องค์ประกอบต่างๆถูกแสดงผล แต่ยังคงซ่อนอยู่ ( left: -10000px) แต่ฉันไม่อยากไปเส้นทางนั้น ฉันคิดว่ามันแฮ็คและฉันต้องการให้ส่วนประกอบของฉันยกเลิกการต่อเชื่อมเพื่อทำความสะอาดและไม่เกะกะ DOM ฉันต้องการสิ่งที่ง่ายต่อการนำไปใช้ เมื่อเมานต์ให้สร้างชุดสไตล์ให้เคลื่อนไหว เมื่อยกเลิกการต่อเชื่อมให้เคลื่อนไหวชุดรูปแบบเดียวกัน (หรืออื่น) เสร็จแล้ว นอกจากนี้ยังต้องมีประสิทธิภาพสูงในหลายแพลตฟอร์ม ฉันเคยชนกำแพงอิฐที่นี่ หากฉันทำอะไรหายไปและมีวิธีง่ายๆในการดำเนินการนี้โปรดแจ้งให้เราทราบ

103 animation  reactjs  css-animations  gsap  react-motion 

ฉันกำลังพยายามทำให้คุณสมบัติแอนิเมชั่น CSS ยังคงอยู่หลังจากทำเสร็จแล้วเป็นไปได้ไหม นี่คือสิ่งที่ฉันพยายามจะบรรลุ ... องค์ประกอบควรซ่อนอยู่เมื่อผู้ใช้เข้ามาที่หน้าหลังจาก 3 วินาที (หรืออะไรก็ได้) องค์ประกอบนั้นควรจะจางลงและเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์แล้วควรอยู่ที่นั่น นี่คือความพยายามในการเล่นซอ ... http://jsfiddle.net/GZx6F/ นี่คือรหัสสำหรับการเก็บรักษา ... <h2>Test</h2> <style> @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0.9; } } h2 { animation: fadeIn 1s ease-in-out 3s; } </style> ฉันรู้วิธีการทำ jQuery .. มันจะเป็นแบบนี้ ... <h2>test</h2> <script> $(document).ready(function(){ $('h2').hide().delay(3000).fadeIn(3000) }); …

94 css  css-animations 

ฉันกำลังพยายามทำให้จุดไข่ปลาเคลื่อนไหวและสงสัยว่าเป็นไปได้ไหมกับภาพเคลื่อนไหว CSS ... ดังนั้นมันอาจจะเป็นเช่นนั้น Loading... Loading.. Loading. Loading... Loading.. และโดยพื้นฐานแล้วก็เป็นเช่นนั้นต่อไป ความคิดใด ๆ ? แก้ไข: ดังนี้http://playground.magicrising.de/demo/ellipsis.html

92 css  css-animations 

ฉันกำลังพยายามสร้างภาพเคลื่อนไหวสไตล์รถไฟเหาะด้วย CSS ฉันต้องการทราบวิธีโค้ง "รถไฟเหาะ" เมื่ออยู่ในระยะวนรอบ ฉันกำลังค้นหาโซลูชัน CSS ทั้งหมด แต่ถ้ามีความต้องการ JavaScript เล็กน้อยฉันก็ใช้ได้ รหัสของฉัน: #container { width: 200px; height: 300px; margin-top: 50px; position: relative; animation: 10s infinite loop; animation-timing-function: linear; } #coaster { width: 100px; height: 10px; background: lightblue; position: absolute; bottom: 0; left: 1px; right: 1px; margin: 0 auto; } @keyframes …

15 html  css  css-animations  css-transforms