css-transitions | 易学教程

Why does a transition occur when showing an element after setting a property while the element is hidden?

阅读更多关于 Why does a transition occur when showing an element after setting a property while the element is hidden?

问题 A live example can be seen here. A red square (showing) is directly above a green square (hidden as overflow). Click on the square, and both colored squares are instantly made fully transparent. Additionally, the height of the red square is set to 0; this fires a transition, but the transition goes unseen because the red square is now transparent. Before clicking the square again, examine the toggle function. Looking at the JavaScript, I would expect the height of the red square to be reset

CSS transition defined in external stylesheet causes transition on page load

阅读更多关于 CSS transition defined in external stylesheet causes transition on page load

问题 I've narrowed down my issue to a fairly simple case. This works (in Chrome, at least), displaying a "pop-up" which is mostly off-screen, with a slice of the right hand side on screen. When I hover over the visible part, the whole pop-up slides into view: <!DOCTYPE html> <html> <head> <title>Popout test</title> <style> #popout { -webkit-transition: left 0.5s ease-in-out; width: 200px; height: 200px; background-color: #cde; border: 4px solid black; padding: 4px; left: -180px; position: absolute

Why the transitionend event can be run when element's children's transition is ended?

阅读更多关于 Why the transitionend event can be run when element's children's transition is ended?

问题 I bound a transitionend event to div1 . When div1 's transition was end, the event ran. There's no problem. I encountered a special case: I added 3 paragraphs to this div1 , when each paragraph's transition is ended, div1 's transitionend event also ran. So the transitionend event ran 4 times. >.< In div1 's transitionend event's listener function's body, I can see that event.target !== this . I feel it's pretty ridiculous! Chrome and Firefox both has this problem. So I guess this is not a

CSS transitions not executing at the same time

阅读更多关于 CSS transitions not executing at the same time

问题 I've created a super simple accordion where I use a h3 / p setup and the p s initially have max-height: 0 but if the h3 has an .open class the p gets something like max-height: 100px ( h3.open + p {max-height: 100px} ). Then I use a few lines of jQuery to add the open class to the clicked h3 . The problem I'm having is that when I click a heading it first slides out, and then like half a second later the other one slides back up. Why aren't the transitions executing at the exact same time?

Combining size and translate transitions causes stutter in Safari

阅读更多关于 Combining size and translate transitions causes stutter in Safari

问题 When adding transitions to an element and altering the width and/or height and -webkit-transform:translate3d, the transition animation stutters. It appears to animate the width/height change first, as well translate it partially, then snaps to the final translated position. When returning to the original style, however, the animation is smooth. I'm only seeing this in Safari (version 8.0.6 tested). Here's some example css #foo{ width:100%; height:200px; border:1px solid black; position

How to transition z-index

阅读更多关于 How to transition z-index

问题 https://jsfiddle.net/vaf6nv36/1/ can the balloons image slowly transition over the apple image? I think that I need more transition parameters, or I should use opacity? can someone help? html <div class="img1"> </div> <div class="img2"> </div> CSS .img1, .img2{ border: 1px solid black; transition: 1s; position: absolute; } .img1{ left: 25%; height: 500px; width: 500px; z-index: 1; background-image: url(http://cdn.pcwallart.com/images/balloons-photography-vintage-wallpaper-1.jpg); } .img2{

CSS transitions blocked by JavaScript

阅读更多关于 CSS transitions blocked by JavaScript

问题 I am trying to create a loading bar during a very intensive period of JavaScript where some pretty heavy 3d arrays are built and filled. This loading bar needs to remain empty until the user clicks a button. The freezing occurs whether or not I'm using -webkit-transition (This app can be chrome exclusive, cross browser is not necessary in my case). Seeking simplicity I've built my bar like this... <div id="loader"> <div id="thumb"> </div> </div> ... and then sought to increment that bar at

How can I change a css property after it has been @keyframe animated?

阅读更多关于 How can I change a css property after it has been @keyframe animated?

问题 I'm fading in some buttons with @keyframe animation from opacity: 0 to opacity: 1. div{ opacity: 1; animation: fadeIn 1s forwards; -webkit-animation: fadeIn 1s forwards; } @-webkit-keyframes fadeIn { 0%{ opacity: 0; }100%{ opacity: 1; } } @keyframes fadeIn { 0%{ opacity: 0; }100%{ opacity: 1; } } div:hover{ opacity: .5 !important; /* THIS DOES NOT HAPPEN BECAUSE THE OPACITY WAS ANIMATED */ color: red; } On :hover, I'd like to change the opacity to .5 but it appears that after a property is

CSS :after hover Transition

阅读更多关于 CSS :after hover Transition

问题 The HTML structure <div id="small_gal"> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> </div> The images are having dropshadows so border is not a solution, as it will be outside the image The border is having transition and it works smoothly on FF

CSS transform transition - using ´px´ more smooth/performant than 'percentage'

阅读更多关于 CSS transform transition - using ´px´ more smooth/performant than 'percentage'

问题 I've recently been looking into improving the animations on my website - more specifically of the navigation dropdown on mobile devices. In this connection I stumbled upon the following case, which I'm hoping to get some more in-depth knowledge about. The case is that when transitioning/animating transform: translate3d() it seems that the browser requires more calculations when it's applied using % rather than px . E.g. in my tests it seems that transitioning from transform: translate3d(0,