css-transitions

问题 I have a collapsable menu on a website I'm developing, but the collapse is only toggling through once. I click "MENU" the menu expands, click it again, the menu closes, but won't continue toggling. Here is a link to my development server. Just resize the browser window until the "MENU" button shows up and click it. http://www.corporateprdev.com/ymcakpt Here is my menu structure: <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar"

问题 I have multiple css transitions on different elements. In my example, if you hover over the circle section the transitions occur on both the circle and the box color change underneath. However if you come out of the circle and into the box section, the circle transition does not occur See fiddle for complete example: http://jsfiddle.net/Lsnbpt8r/ Heres my html: div class="row"> <div class="col-sm-4 text-center transistion"> <div class="box"> <i class="circle-pos circle glyphicon glyphicon

问题 I created a toggle-menu, like the DEMO. I add a css transition effect for div.nav-menu , and i used max-height:0; to max-height:480px; . When click the menu toggle to show the menu, the transition was working good. But when I click the menu toggle to hide the menu again the transition didn't work now. What did I did wrong? 回答1: You are wrong about CSS Transitions. They do not animate when you add or remove class , It will only animate when you change the CSS properties . And You are directly

问题 I'm using the following css transition: cubic-bezier(0.16, 1, 0.29, 0.99) The issue is that at the end of the animation, the velocity of the element is so slow that the human eye can see the individual frames. Here is a jsfiddle that demonstrates the issue: http://jsfiddle.net/vivmaha/xu7dzrbs/ Is there a common solution for the above problem? For example, can I specify both a cubic bezier AND a minimum velocity? 回答1: I think the apparent slowness (i.e. as it is sometimes referred to as jank

问题 I want to flip an image with a rotation animation when hovering over it (see the code below). When hovering over the image, it rotates around its x-axis for one second (and back when the mouse leaves the image). The animation works as expected in Firefox and Safari. However, Chrome sometimes skips the animation and flips the image instantly. I don't know how to reliably reproduce the problem because it usually works a few times before the animation is skipped. I have recorded a video, so you

问题 I want to flip an image with a rotation animation when hovering over it (see the code below). When hovering over the image, it rotates around its x-axis for one second (and back when the mouse leaves the image). The animation works as expected in Firefox and Safari. However, Chrome sometimes skips the animation and flips the image instantly. I don't know how to reliably reproduce the problem because it usually works a few times before the animation is skipped. I have recorded a video, so you

问题 Let's say I have a style like this, with a transition: #theElement { position: relative; left: 200px; transition: left 1s; } And some code: var element = document.getElementById("theElement"); function animateX(px) { element.style.left = px + "px"; } So, simply there is a animateX function, which simply says what it does, animates the left propery of theElement , now what if I also want to have a function that instantly sets the left property, without a transition: function setX(px) { element

问题 When you transition objects, the hover state doesn't get updated (CSS rules with :hover ) until you move the mouse. When you move DOM elements beneath the users' mouse (with transition or some other equivalent) the hover state doesn't update until the mouse moves. Is there any workaround for this? I don't want to get into fancy JS to fire the 'mouseover' event. JSFiddle: http://jsfiddle.net/forestka/8xJkR/1/ HTML: <div id="below"> This is the one below. (Now move the mouse.) </div> <div id=

问题 I got a strange problem with IE11 and 10 when i try to animate a transform translateY() with transitions. I have a skybox with a sky inside which is 500vh height. this sky has to be moved up and down according to the current section in the viewport. the viewport is an absolute:position element which handels the content and so on. when i now set the sky to lets say transform: translateY(-400vh), then it works correctly in every browser except IE11 and 10. it looks like the element disappears

问题 In my project I have screen which should ease-in from right side of the screen so for that thing I have used transform: translateX(100%) and then changing that to transform: translateX(0%) . it works fine I able to achieve the ease-in effect but in that screen I have action button which has css property of Position: Fixed;Bottom: 0px; but this is not working I mean its not sticking in the bottom of the screen. Here is my JSfiddle : https://jsfiddle.net/sureshpattu/a1seze4x/ Html: <header>