Pertanyaan yang diberi tag «css-transitions»

Saya mencoba membuat <ul>slide menggunakan transisi CSS. The <ul>dimulai di height: 0;. Saat mengarahkan, ketinggian diatur ke height:auto;. Namun, ini menyebabkannya hanya muncul, bukan transisi, Jika saya melakukannya dari height: 40px;ke height: auto;, maka akan meluncur ke atas height: 0;, dan kemudian tiba-tiba melompat ke ketinggian yang benar. Bagaimana lagi …

2136 css  css-transitions 

Saat ini saya sedang mendesain menu 'mega dropdown' CSS - pada dasarnya menu dropdown khusus CSS saja, tetapi yang berisi berbagai jenis konten. Saat ini, tampaknya transisi CSS 3 tidak berlaku untuk properti 'display' , yaitu, Anda tidak dapat melakukan transisi apa pun dari display: nonekedisplay: block (atau kombinasi apa …

1449 css  css-transitions 

Sepertinya saya tidak dapat menemukan sintaks yang benar untuk singkatan transisi CSS dengan beberapa properti. Ini tidak melakukan apa-apa: .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: …

519 css  webkit  css-transitions  shorthand 

Dapatkah transisi CSS digunakan untuk memungkinkan paragraf teks memudar saat memuat halaman? Saya sangat suka tampilannya di http://dotmailapp.com/ dan akan senang menggunakan efek serupa menggunakan CSS. Domain telah dibeli dan tidak lagi memiliki efek yang disebutkan. Salinan yang diarsipkan dapat dilihat di Wayback Machine . Ilustrasi Memiliki markup ini: <div …

442 css  css-transitions  opacity 

Ini pertanyaan yang cukup mudah tetapi saya tidak dapat menemukan dokumentasi yang sangat bagus tentang properti transisi CSS. Berikut ini cuplikan 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: …

327 animation  css  css-transitions 

Saya mencoba untuk transisi di hover dengan css di atas thumbnail sehingga saat di hover, gradien latar belakang memudar. Transisi tidak berfungsi, tetapi jika saya hanya mengubahnya ke rgba()nilai, itu berfungsi dengan baik. Apakah gradien tidak didukung? Saya mencoba menggunakan gambar juga, itu tidak akan mengubah gambar juga. Saya tahu …

215 css  gradient  css-transitions 

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 

Apakah ada peristiwa yang dipecat oleh elemen untuk memeriksa apakah transisi css3 telah dimulai atau berakhir?

190 javascript  events  css  transition  css-transitions 

Apakah ada solusi lintas browser untuk menghasilkan transisi slide-in dengan CSS saja, tanpa javascript? Di bawah ini adalah contoh konten html: <div> <img id="slide" src="http://.../img.jpg /> </div>

177 css  css-transitions 

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 mencoba membuat efek "fade-in fade-out" menggunakan transisi CSS. Tapi saya tidak bisa mendapatkan ini untuk bekerja dengan gambar latar belakang ... 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 …

122 css  background  background-image  css-transitions 

Jadi saya memiliki transisi css berikut yang dilampirkan ke elemen a: 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; } Apakah ada cara untuk menonaktifkan transisi yang diwariskan ini pada elemen …

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; } Mengapa ini hanya menganimasikan opasitas saat saya mengarahkan kursor, tetapi tidak saat saya meninggalkan objek dengan mouse? Demo di sini: http://jsfiddle.net/7uR8z/ …

115 css  css-transitions 

Apa perbedaan antara CSS3 transisi ease-in, ease-out, dll?

113 css  css-transitions 

Saya ingin menerapkan transisi CSS ke semua properti selain dari background-position. Saya mencoba melakukannya dengan cara ini: .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: …

109 css  css-transitions