css-transitions

问题 I have a wierd problem with media queries in chrome I added transition to some elements in my page and created for example 3 states of media queries when I resize the browser and change the state of media query my elements change size with animation, it's okey and perfect but when I try to keep the size of the browser exactly in the edge of media queries or very close to it my elements quirks and shake, sometimes slow down my page speed like slow motion when I drop the resize, the main

问题 I have an element called #artwork which needs to be animated: #artwork{ -webkit-transition: all 20s ease-in; transition:all 20s ease-in; width:75%; display:block; margin:0px auto; } #artwork.trans{ width:60%; } The problem is, the transition happens instantly without any delay (in my case 20s). I have tried Jquery's toggleClass function to no avail and I also tried the css function which also didn't work. $(window).load(function(){ var addImage = function(background){ $("#images").append("

问题 I'm trying to do a basic ease out transition on a panel with a background image. I'm wanting it to fade to background color on hover. I've tried using various transitions non of which are working. I've tried (which i thought would work): transition:background-image 0.2s ease-in-out; .panel { width:200px; height:200px; background:#000 url("https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png") no-repeat center center / cover; transition:background-image 0.2s ease-in-out; }

问题 So I have a grid of elements and I have set them to fade in one after the other on page load. So they have a 0.2s delay from one element to the next fading in from opacity 0 to opacity 1. I then want images in these elements to grow when there grid section is highlighted, but my animation-fill-mode is preventing this. Any work arounds? //Expand when hover over. .main-image { transition: transform .2s ease-in-out; } #portfolio:hover #portfolio-image { transform: scale(1.1); } // Fade in with

问题 If an ordered list uses flex-direction: column on small screens and flex-direction: row on larger screens, can CSS3 animations or transitions animate the flex-direction property between media queries? Initial page set up html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { font-size: 100%; } ol { display: flex; flex-direction: column; margin: 0; padding: 1rem 2rem; } ol a { display: block; padding: 1rem; text-decoration: none; border-bottom: 1px solid blue; }

问题 If an ordered list uses flex-direction: column on small screens and flex-direction: row on larger screens, can CSS3 animations or transitions animate the flex-direction property between media queries? Initial page set up html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { font-size: 100%; } ol { display: flex; flex-direction: column; margin: 0; padding: 1rem 2rem; } ol a { display: block; padding: 1rem; text-decoration: none; border-bottom: 1px solid blue; }

问题 If an ordered list uses flex-direction: column on small screens and flex-direction: row on larger screens, can CSS3 animations or transitions animate the flex-direction property between media queries? Initial page set up html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { font-size: 100%; } ol { display: flex; flex-direction: column; margin: 0; padding: 1rem 2rem; } ol a { display: block; padding: 1rem; text-decoration: none; border-bottom: 1px solid blue; }

问题 I've written a React app, using CSS transitions. But those transitions does not work correctly in some of the components. In my app, only the components who are moving upwards works well, those who are moving downwards moves instantly without animation. (I want them both moves with animation.) Here is the CSS I used there: div.canvas { position: absolute; top: 90px; left: 60px; width: 640px; height: 480px; border: 1px solid #999; background: white; } div.canvas-rect { position: relative;

问题 I've written a React app, using CSS transitions. But those transitions does not work correctly in some of the components. In my app, only the components who are moving upwards works well, those who are moving downwards moves instantly without animation. (I want them both moves with animation.) Here is the CSS I used there: div.canvas { position: absolute; top: 90px; left: 60px; width: 640px; height: 480px; border: 1px solid #999; background: white; } div.canvas-rect { position: relative;

问题 I have an element that is visibility: hidden until hovered over, with a transition on the opacity for a nice fade. The problem is that fade only works one way, because when the element instantly becomes visibility: hidden which hides the opacity transition. How can I work around this? Edit: To be clear, it is important that the element have visibility: hidden until the hover is activated. An element with opacity: 0 can be interacted with, while an element with visibility: hidden cannot.