css-transitions | 易学教程

jQuery Masonry and CSS3

阅读更多关于 jQuery Masonry and CSS3

问题 How do i maintain the masonry layout yet involve the CSS3 transition with the current images? Heres my html <body> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="masonry.js"></script> <script> $(function () { $('#container').masonry({ columnWidth: 1, itemSelector: 'div' }); }); </script> <div id="imagetrans"> <img class="bottom" src="images/eventbox2.png" /> <img class="top" src="images/eventbox.png" /> </div> <div id="logo"> </div> <div id=

CSS transition flickering in Firefox

阅读更多关于 CSS transition flickering in Firefox

问题 I have 3 elements that is growing on :hover using a CSS transition. Two of them work just fine, but the last one is flickering in Firefox, but works in Chrome and IE. So the problem is only there in Firefox. CSS: .contact{ width: 300px; height: 250px; margin: 10px; margin-top: 37px; float: right; background-color: #eca83b; border-radius: 10%; transition: 0.5s; } .contact:hover{ width: 320px; margin: 0px; margin-top: 27px; height: 260px; } HTML: <section class="contact"> <svg> </svg> <h2 class

Parallax effect with CSS transition

阅读更多关于 Parallax effect with CSS transition

问题 Is it possible to make parallax effect of background image with css transitions? Parallax should be slower than scrolling, so something do slowing is needed - is it possible to do it with css? Or if not, how best to do it with js/jquery? I care about best performance script, because my webpage is little overloaded. Could someone tell or show how to do it? I will be very grateful. 回答1: CSS has a perspective property which you can combine with zoom to achieve an element "behind" or "in front of

CSS3 transition on table row using height property

阅读更多关于 CSS3 transition on table row using height property

问题 I have an HTML table displaying some information with a few rows. On each row, the user can click to reveal some additional rows that contains information related to the clicked row. Something like this: While the additional rows are being created with an AJAX request, a loading row is inserted right after the clicked row : Currently, everything works perfectly (drill down style), but I would like to add some animation to the loading row. I found a question ( this one ) that has a JSFiddle

Overflow hidden with border radius not working in chrome

阅读更多关于 Overflow hidden with border radius not working in chrome

问题 Not sure whether it is chrome specific bug or what, but when I am transitioning child element on a parent that has overflow hidden with border radius, the overflow is visible, while the transition is in place. var wrapper = document.getElementsByClassName('wrapper')[0], img = document.getElementsByTagName('img')[0]; /* Click anywhere in the bordered area to toggle img */ wrapper.addEventListener('click', function() { if (!img.className) { img.className = 'hidden'; } else { img.className = '';

How to pause and restart a css3 transition in jquery transit

阅读更多关于 How to pause and restart a css3 transition in jquery transit

问题 I'm using jquery transit to move and element. I want to pause the animation and continue it on click of a button. But i'm unable to figure out how to do it. JSFiddle : http://jsfiddle.net/b4hwq/2/ I did try stop().transition({}); but it is throwing an error. 回答1: You were most of the way there with .stop() I just added a little logic to tell it what to do when it stops. Working Example $('button').click(function () { if (!$('.box').hasClass('stop')) { // if the box does not have class "stop"

Scaling image with CSS Transition

阅读更多关于 Scaling image with CSS Transition

问题 This is how I want to scale my images, smoothly without any jumps. My attempt does not work like in the gallery above, the image (red square in my case) jumps, my code: section { background-color: rgba(0, 0, 0, 0.701961); width: 400px; height: 400px; } div { position: absolute; top: 120px; left: 120px; width: 160px; height: 160px; background-color: red; -webkit-transition: all .2s ease-in-out; } div:hover { -webkit-transform: scale(1.8); } <section> <div></div> </section> How to fix this? The

CSS transitions, different durations with the same property?

阅读更多关于 CSS transitions, different durations with the same property?

问题 I know you can set different durations for different properties with CSS transitions. But is it possible to set different durations for the same property? Example: I want a box to grow/shrink in width to length A quickly when hovered/mouse exits, but grow/shrink in width to length B slowly when a button is pressed, using a different class. Here is an example: http://jsfiddle.net/VDyPG/7/ At the moment, the box only grows quickly when hovered, it shrinks back slowly when the mouse exits. Of

css3 transition: different time value when :hover In than Out?

阅读更多关于 css3 transition: different time value when :hover In than Out?

问题 Basically i am trying to have different transition time when the item is hovered than when the item is mouse leaved, #bar{ position:fixed; bottom:-25px; } /*here you only get to see a piece of the bar */ #bar:hover{ transform: .2s linear; bottom:0; } And something like /*this only represents my made out status to cover what i need*/ #bar:mouseLeaved{ transform: 2s linear } This way it would take .2 seconds to be shown and 2 seconds to be hidden Can i do this with no need of javascript? 回答1: I

css transition is not trigger by add classes in a same function

阅读更多关于 css transition is not trigger by add classes in a same function

问题 when I click the window, CSS transition is not trigger. const div = document.querySelector('div'); window.onclick = function() { div.classList.add('fade'); div.classList.add('in'); } .fade { opacity: 0; } .fade.in { transition: opacity 2s linear; opacity: 1; } <div>aaaa</div> then I change the script, use setTimeout to add the second class in , it works. const div = document.querySelector('div'); window.onclick = function() { div.classList.add('fade'); setTimeout(function() { div.classList