Pertanyaan yang diberi tag «css-animations»

Saya menjalankan animasi pada beberapa elemen yang diatur opacity: 0;dalam CSS. Kelas animasi diterapkan onClick, dan, menggunakan keyframes, itu mengubah opacity dari 0ke 1(antara lain). Sayangnya, ketika animasi selesai, elemen kembali ke opacity: 0(di Firefox dan Chrome). Pemikiran alami saya adalah bahwa elemen animasi mempertahankan keadaan akhir, mengesampingkan sifat asli …

301 css  css-animations 

Saat ini, saya memiliki kode ini: @-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; } Berkedip, tetapi hanya berkedip "satu arah". Maksudku, itu hanya memudar, dan kemudian muncul kembali opacity: 1.0, …

288 html  css  css-animations  opacity 

Apakah mungkin menggunakan animasi transisi CSS3 pada pemuatan halaman tanpa menggunakan Javascript? Ini adalah jenis yang saya inginkan, tetapi pada pemuatan halaman: http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html Apa yang saya temukan sejauh ini CSS3 transisi-delay , cara untuk menunda efek pada elemen. Hanya berfungsi pada hover. CSS3 Keyframe , berfungsi pada beban tetapi sangat …

195 css  webkit  css-transitions  css-animations 

Saya memiliki animasi CSS3 bagian 4 yang diputar saat klik - tetapi bagian terakhir dari animasi dimaksudkan untuk melepasnya dari layar. Namun, ia selalu kembali ke kondisi semula setelah dimainkan. Ada yang tahu bagaimana saya bisa menghentikannya pada frame css terakhirnya (100%) , atau cara menghilangkan seluruh div itu dalam …

181 css  css-animations 

Saya telah meninjau beberapa demo dan tidak tahu mengapa saya tidak bisa mengaktifkan spin CSS3. Saya menggunakan rilis stabil terbaru dari Chrome. Biola: 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; …

158 css  css-animations 

Jadi, saya mengerti bagaimana melakukan transisi dan animasi CSS3. Yang tidak jelas, dan saya sudah googled, adalah kapan harus menggunakan yang mana. Misalnya, jika saya ingin membuat bola memantul, jelas bahwa animasi adalah cara untuk pergi. Saya bisa memberikan keyframe dan browser akan melakukan frame perantara dan saya akan membuat …

155 css  css-transitions  css-animations 

Saya benar-benar ingin membuat sepotong teks berkedip gaya old-school tanpa menggunakan javascript atau dekorasi teks. Tidak ada transisi, hanya * kedip *, * kedip *, * kedip *! EDIT : Ini berbeda dari pertanyaan itu karena saya meminta berkedip tanpa transisi terus-menerus, sedangkan OP dari pertanyaan lain bertanya bagaimana cara …

149 html  css  css-animations  blink 

Sepertinya telah ada pembaruan terkini untuk Google Chrome yang menyebabkan teks kabur setelah melakukan transform: scale(). Secara khusus saya melakukan ini: @-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); } } Jika …

126 google-chrome  css  webkit  transform  css-animations 

Bagaimana saya bisa memiliki dua animasi CSS yang diputar dengan kecepatan berbeda ? Gambar harus berputar dan tumbuh pada saat yang bersamaan. Rotasi akan berputar setiap 2 detik. Pertumbuhan akan berputar setiap 4 detik. Kode Contoh: .image { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin:-60px 0 …

119 css  css-animations 

Sesuatu yang sesederhana ini seharusnya dapat dengan mudah dilakukan, namun saya berusaha menjelaskan betapa rumitnya hal itu. Yang ingin saya lakukan adalah menganimasikan proses pemasangan & pelepasan komponen React, itu saja. Inilah yang telah saya coba sejauh ini dan mengapa setiap solusi tidak berfungsi: ReactCSSTransitionGroup - Saya tidak menggunakan kelas …

103 animation  reactjs  css-animations  gsap  react-motion 

Saya mencoba untuk membuat properti animasi CSS tetap ada setelah menyelesaikan, apakah ini mungkin? Inilah yang saya coba capai ... Elemen harus disembunyikan saat pengguna membuka halaman, setelah 3 detik (atau apa pun), elemen tersebut akan menghilang dan setelah animasi selesai, elemen tersebut akan tetap berada di sana. Ini adalah …

93 css  css-animations 

Saya mencoba membuat elipsis beranimasi, dan bertanya-tanya apakah itu mungkin dengan animasi CSS ... Jadi mungkin seperti itu Loading... Loading.. Loading. Loading... Loading.. Dan pada dasarnya teruskan seperti itu. Ada ide? Edit: seperti ini: http://playground.magicrising.de/demo/ellipsis.html

92 css  css-animations 

Saya mencoba membuat animasi gaya roller coaster dengan CSS. Saya ingin tahu bagaimana cara melengkung "coaster" ketika itu dalam tahap loop. Saya sedang mencari solusi semua CSS tetapi jika perlu sedikit JavaScript saya setuju dengan itu. kode saya sejauh ini: #container { width: 200px; height: 300px; margin-top: 50px; position: relative; …

15 html  css  css-animations  css-transforms