css-transitions

Div displays in Firefox, Safari, Chrome, etc. but not in Internet Explorer

由 旧时模样 提交于 2020-01-04 02:34:09
问题 This div transition displays fine in most browsers, but not in Internet Exporer. You can see the error by clcking on the secondview link on the left. Here is the HTML and CSS source: <!DOCTYPE html> <!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]--> <!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]--> <!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]--> <!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]--> <!--[if gt IE 9]><!--><html

Push side menu jerky CSS transform transition in Chrome

由 怎甘沉沦 提交于 2020-01-03 16:48:53
问题 I have this situation and I am interested to know what can I do, in order to have a smooth menu sliding movement, all the way to the right (at menu-open) and to the left (at menu-close) without that jiggling interrupted-sticky effect at the beginning and the end of the movement that sometimes is covering the body site wrapper; I've tried to apply a smooth transition but the issue is still there: #responsive-menu-pro-button, #responsive-menu-pro-container, .edge-wrapper { -ms-transition-timing

Fade in dynamically generated content with Bootstrap 3

由 北慕城南 提交于 2020-01-02 07:47:28
问题 I've read several similar questions on SO regarding Bootstrap's fade classes, but none of them seem to address my issue. I understand that the fade animation in Bootstrap 3 works by switching opacity between 0 and 1 when you add the .in class to an element that already has a .fade class. This works fine for me when dealing with an element that already exists in the HTML (for example, this JS Fiddle demo). The problem is that the transition doesn't seem to happen when the element is created

CSS3 FlexBox transitions

由 无人久伴 提交于 2020-01-02 05:56:32
问题 In this codepen example: http://codepen.io/DrYSG/pen/ovctn I created three flexboxes. The effect I want is that when one hovers over the middle box, it grows in size (color change in the demo is just to help me know about the hover). In FireFox v19 this almost works correctly. But it is strange what it picks of the start and end widths of the animation. In Chrome v25, I am getting rapid unstable oscillation of states (flashing). Really not correct. In IE10 I get the same transition as FireFox

Why can't I animate custom properties (aka CSS variables)?

由 帅比萌擦擦* 提交于 2020-01-02 05:22:12
问题 See this animation: The golden div has an animation where a custom property is animated ( @keyframes roll-o-1 animates --o ). This animates in steps. The silver div has an animation where a normal property is animated ( @keyframes roll-o-2 animates left ). This animates continuously. Why doesn't the golden div animate smoothly? Is there any workaround which also uses variables? #one { width: 50px; height: 50px; background-color: gold; --o: 0; animation: roll-o-1 2s infinite alternate ease-in

Adding transition to a different property

由 送分小仙女□ 提交于 2020-01-02 00:53:12
问题 I have an element with two classes: <div class="class1 class2"></div> .class1 {transition: background-color 0.4s;} .class2 {transition: top 1s;} The problem is that the transition of class2 overwrites the transition of class1 . I can't use .class2 {transition: all 1s} because the transition duration must be different. I also don't want to duplicate the code from class1 to class2 because class2 can be applied to other elements as well. Is there a way to add transitions to an element without

Css Transition on hover for child element

由 偶尔善良 提交于 2020-01-02 00:49:32
问题 Im trying to pause the display of a child element when it's parent is hovered over. Html: <span> <div>This Is The Child</div> Some Text in the span </span> Css: span { position: relative; } span div { display: none; width: 0px; opacity: 0; transition: width 5s; -webkit-transition: width 5s; transition: opacity 5s; -webkit-transition: opacity 5s; } span:hover div { display: inline-block; width: 150px; opacity: 1; }​ As of right now, when the span is hovered, the div has no delay before it is

Is it possible to get the target calculated css property value during a css3 transition in Javascript?

由 荒凉一梦 提交于 2020-01-01 12:07:10
问题 Is it possible to get the target (final) calculated css property value during a css3 transition in Javascript? I found this answer: Is it possible to get the target css property value during a css3 transition in Javascript? So, I can get it as document.getElementById('transition_div').style.width BUT this works only when target css property is specified in css. I need get target property value which is calculated dynamicaly - not specified in CSS. HTML: <table> <tr> <td id="cell-1">CELL 1</td

Does WebKit use OpenGL to render CSS transitions?

由 断了今生、忘了曾经 提交于 2020-01-01 08:54:08
问题 Does WebKit use OpenGL to render CSS transitions, or does it use software rendering? 回答1: WebKit is just a frontend. It depends on the backend and the hardware support. Google Chrome uses skia as a back-end and it can use software or hardware. So the answer is it depends on the implementation of the back-end and the hardware it is running on. 回答2: From what I know the only hardware accelerated property using transitions is the translate3d transform . Eg: // Normal div{ -webkit-transition: all

Can I animate absolute positioned element with CSS transition?

由 ↘锁芯ラ 提交于 2020-01-01 07:26:18
问题 I want to animate an element's position change with CSS transition, but it is not working even when I use the transition on all properties, as in the example here: http://jsfiddle.net/yFy5n/3/ However, I don't want my final solution to apply transition to all properties, but instead only on the position change. So the color change should be instant, only the position change from left to right should be animated (the opposite of what is happening now). 回答1: You forgot to define the default
订阅 css-transitions