css-transitions

问题 I know that you can force GPU acceleration to achieve smooth animation of elements across the screen by applying a transition to the 'transform' property, e.g.: elem.style.transition = 'all 3s ease-out'; elem.style.transform = 'translateX(600px)'; But I was wondering what would happen if you replaced the second line with: elem.style.left = '600px'; Would/could GPU acceleration kick in for the "left" (or "top") property, or does it have to be on the transform property? It seems to me that it

问题 If you click and don't move your mouse you'll see the button's color remaining as red! What I want accomplish is after you click and don't move the mouse it still removes/toggles .hover class. Example on jsFiddle $(function() { var $Btn = $('.button'); $Btn.hover(function() { $(this).toggleClass("hover"); }); $Btn.on("click", function() { $(this).toggleClass('active') $('.move').toggleClass('angle'); }); }); .move { border: 1px solid #000000; padding: 10px; transition: transform .2s ease; /*

问题 I have a some basic button styles where on :hover I add the letter-spacing property: .btn { display: inline-block; text-align: center; background-color: transparent; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; cursor: pointer; transition: all 0.2s ease; } .btn-primary { background-color: #8065F1; color: #FFFFFF; } .btn-large { border-radius: 32px; box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23); padding: 0.25rem 3rem; font-size: 1.5rem;

问题 In my app I'm animating the opacity of elements on the page with something like: .s { transition-property: opacity; transition-duration: 250ms; } (with vendor-specific versions, of course). And then .s.hidden { opacity: 0; } So the animation starts when the hidden class is assigned. Problem is, mouse events are still detected on elements with opacity zero, which I don't want, so I need to either set visibility to hidden or display to none after the transition is finished. I would hope to be

问题 I'd like to delete an object after it's done animating with a CSS transition, but I'm not able to use a JavaScript library. How do I detect when the animation is done? Do I use a callback or custom event somehow? 回答1: element.addEventListener('transitionend', function(event) { alert("CSS Property completed: " + event.propertyName); }, false ); For now, the exact event name has not been standardized. Here's a quote from MDN: There is a single event that is fired when transitions complete. In

问题 I've already got the circle part. I set a background color of black on the div. and for the text, I set a:hover as the color shown. I just can't figure out how do I set a:hover for the div as well just for that amount of circumference. Here's my code: HTML: <a class="cirlink" href="http://www.somesite.com"> <div class="circle"> <h2 class="textcolor">click<br> here</h2> </div> </a> CSS: .circle { border-radius: 125px; width:250px; height:250px; background-color:black; margin:auto; text-align

问题 Is there a way to continuously animate a background image's background-position property using CSS3 transitions? 回答1: Yes, it's possible - DEMO div { background: url(http://lorempixel.com/100/100); height: 100px; width: 100px; -webkit-animation: slide 2s linear infinite; -moz-animation: slide 2s linear infinite; animation: slide 2s linear infinite; } @-webkit-keyframes slide { 0% {background-position: 0 0;} 100% {background-position: 100px 0;} }​ @-moz-keyframes slide { 0% {background

问题 From my understanding, one way to work with CSS transitions is to use Ember.run.scheduleOnce('afterRender') However, for me it is not working without adding a timeout. This is in Ember 1.0.0 View = Em.View.extend({ didInsertElement: function() { Ember.run.scheduleOnce('afterRender', this, 'animateModalOpen'); }, animateModalOpen: function() { // this does not work - modal gets styles from class "in" with no transition $('.modal').addClass('in'); // this does work, the transition is fired

问题 I have a div which contains a some slides and menu. #wrap { position: relative; top: 0; transition: top 1.4s cubic-bezier(.49,.22,.52,1.35); } <div id="wrap"></div> Can anyone explain to me what the transition property does here? I am not able to understand the effect it's going to produce on the div. 回答1: Answer for your question that property is for the animation of <div id="wrap"></div> . It means it will animate using top property! And for Effect: It will Bounce like This Will Be the

问题 Is there a way to use -webkit-transition with display ? I'm using CSS display to hide and show a navigations second level … but only display: none and display: block on :hover is a little un-sexy… a ease would be great (like -webkit-transition: display 300ms ease-in; ) I know that's fairly easy to do this with jQuery, but I'm currently trying to setup everything with CSS3 (i know: not all browsers do support it, but that's irrelevant for this one project I'm currently working on) here's some