css-transitions

问题 I've got css to do a card flip on a element in 3d space. It works great except for when you scroll up and down the page you randomly get white elements displaying on the page at certain places in Chrome. I've attached an image as an example inside a facebook tab. In chrome windows, the white "boxes" cover up content on occasion. When I comment out the 3d transform css, this doesn't occur. Here is a fiddle (http://jsfiddle.net/derekaug/QSEvs/) of the css that does the 3d stuff. Unfortunately,

问题 I have a layout with a header and a few images as content. I would like when any image is clicked, it expands to fit the screen with a transition. jQuery and JS are fair game. Here is what I have, I just can't get it to work with transition because of the position changes. It also should cover the header and doesn't. $( document ).ready(function() { $( "main img" ).click(function() { $(this).toggleClass("click"); }); }); html, body { height:100%; margin:0; padding:0; } header { height:25%;

问题 I tested with the following answers: Pure CSS rotate animation broken while in infinite loop Stop infinite CSS3 animation and smoothly revert to initial state CSS Image Fade Animation Only Runs First Time, but the animation duration and timeline (for example, from step by step, from start to end) did not work. The three images need to be in the same place at once. I wanted to use https://codepen.io/jay-bee-why/pen/Htejl, but unfortunately I do not want to use jQuery. I am CSS and JavaScript

问题 I am making a menu that each item has a text like item1, item2 and etc. in hover the background colour changes, text becomes transparent and a background image replaces. I used this code to ease in and out the style. but it only works for background colour and not the image. #nav li:hover { color:transparent !important; text-shadow: none; background-color: rgba(255, 0, 0, .5); -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -o-transition: all 1s ease-in; -ms-transition:

问题 I am animating a container on mouseover from right to the left with CSS transitions. This works fine in all browsers except Internet Explorer. The reason is that I am using (and need to use) calc() in my CSS left property. I created a live demo here: Live Demo The CSS looks like this: div { background: red; width: 100px; height: 100px; position: absolute; top: 100px; left: 90%; -webkit-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: left 0.7s cubic-bezier(0.77, 0, 0

问题 Following examples found on Fade Effect on Link Hover? I made this: http://jsfiddle.net/felipelalli/ns9d1vug/ <div class="fade"/> .fade { -o-transition: 0.3s; -moz-transition: 0.3s; -khtml-transition: 0.3s; -webkit-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; width:128px;height:128px; background:url('http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png') } .fade:hover { color: #b50000; width:128px;height:128px; background:url('http:/

问题 Following examples found on Fade Effect on Link Hover? I made this: http://jsfiddle.net/felipelalli/ns9d1vug/ <div class="fade"/> .fade { -o-transition: 0.3s; -moz-transition: 0.3s; -khtml-transition: 0.3s; -webkit-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; width:128px;height:128px; background:url('http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png') } .fade:hover { color: #b50000; width:128px;height:128px; background:url('http:/

问题 I have a problem. Im using Bounce.js to create nice menu animations (with some cool effects). Bounce.js using css keyframes animations which can be problematic to restart. I got menu and when I click a button and when .show class is added it should fire show animation. But when I press that button again hide class should be added with hide animation (which is just reverse version of previous animation). Js is working (classes are adding and removing properly) but animation is fired only once

问题 I've got my main page here: http://thenozzle.net/ The logo at the top of the page is a sprite, switches between top and bottom to give the glow effect. This is done with css transition and :hover pseudo element. However, I recently added the 'projekktor' HMTL5 video player. It works really well, but if you start the video, then hover of the logo, it glitches out when you mouse-over. Also, Google Chrome doesn't play the video served from ea.com The Battlefield 3 clip. Chrome won't play it,

问题 I wanted to create a "bouncy" animation for an element using: div{ -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); -webkit-transition:all 0.4s cubic-bezier(0.57, 0.07, 0.44, 2); -moz-transition:all 0.4s cubic-bezier(0.57, 0.07, 0.44, 2); -ms-transition:all 0.4s cubic-bezier(0.57, 0.07, 0.44, 2); } div.fire{ -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); } Fairly simple. Using the scale transform, I hide the element completely (or