Ie < 9 CSS3 Transition Effect Cheats

Does IE9 support transition CSS3 effects?

CSS Transitions are not supported in IE9.

http://caniuse.com/#feat=css-transitions

Also, IE10 uses unprefixed transition. (so -ms-transition is of no use here)

Use Modernizr to detect if css transitions are supported, else fallback with jQuery Animate for all browsers (including IE9) that do not support CSS transitions.

if(!Modernizr.csstransitions) { // CSS ANimations Not supported.
//ADD YOUR CODE HERE
}

HTML5/CSS3 Modal Box Compatibility with IE

IE9 does not support CSS pointer-events. In all browsers the dialog is invisibly (opaquely) rendered over the whole page but in IE9 the pointer events are not ignored and therefore the dialog is blocking the click event on the anchor.

There is probably a cleaner way to solve this but as a workaround you could add the following properties in a separate stylesheet for IE using conditional comments.

.modalDialog {
    display:none;
}

.modalDialog:target {
    display:block;
}

Another workaround is to give the <a> position and a z-index > the z-index of the dialog.

Also, CSS transition is not supported in IE9 so you might need to look for an alternative, maybe IE < 9 CSS3 Transition Effect Cheats? will help.

CSS Animation for fading background colors

CSS3 transition property is your solution.

.btn {
  background-color: lightblue;
  -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
     -moz-transition: all 0.3s ease-out;  /* FF4+ */
      -ms-transition: all 0.3s ease-out;  /* IE10 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
          transition: all 0.3s ease-out;
}  

.btn:hover {
  background-color: lightgreen;  
}

CSS transition effect makes image blurry / moves image 1px, in Chrome?

2020 update

• If you have issues with blurry images, be sure to check answers from below as well, especially the image-rendering CSS property.
• For best practice accessibility and SEO wise you could replace the background image with an <img> tag using object-fit CSS property.

---

Original answer

Try this in your CSS:

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

What this does is it makes the division to behave "more 2D".

• Backface is drawn as a default to allow flipping things with rotate
  and such. There's no need to that if you only move left, right, up, down, scale or rotate (counter-)clockwise.
• Translate Z-axis to always have a zero value.
• Chrome now handles backface-visibility and transform without the -webkit- prefix. I currently don't know how this affects other browsers rendering (FF, IE), so use the non-prefixed versions with caution.

JQuery - How to fade the background image on button hover

I have added these CSS3(if CSS3 is an option for you) properties for the body tag in your JSFiddle:

transition-property: background;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0.2s;

Be sure to cache the images for best results.

CSS Transition fails on jQuery .load callback

When element is added, reflow is needed. The same applies to adding the class. However when you do both in single javascript round, browser takes its chance to optimize out the first one. In that case, there is only single (initial and final at the same time) style value, so no transition is going to happen.

The setTimeout trick works, because it delays the class addition to another javascript round, so there are two values present to the rendering engine, that needs to be calculated, as there is point in time, when the first one is presented to the user.

There is another exception of the batching rule. Browser need to calculate the immediate value, if you are trying to access it. One of these values is offsetWidth. When you are accessing it, the reflow is triggered. Another one is done separately during the actual display. Again, we have two different style values, so we can interpolate them in time.

This is really one of very few occasion, when this behaviour is desirable. Most of the time accessing the reflow-causing properties in between DOM modifications can cause serious slowdown.

The preferred solution may vary from person to person, but for me, the access of offsetWidth (or getComputedStyle()) is the best. There are cases, when setTimeout is fired without styles recalculation in between. This is rare case, mostly on loaded sites, but it happens. Then you won't get your animation. By accessing any calculated style, you are forcing the browser to actually calculate it

Trigger CSS transition on appended element

Explanation For the last part

The .css() method is a convenient way to get a style property from the first matched element, especially in light of the different ways browsers access most of those properties (the getComputedStyle() method in standards-based browsers versus the currentStyle and runtimeStyle properties in Internet Explorer) and the different terms browsers use for certain properties.

In a way .css() is jquery equivalent of javascript function getComputedStyle() which explains why adding the css property before adding class made everything work

Jquery .css() documentation

// Does not animatevar $a = $('<div>')    .addClass('box a')    .appendTo('#wrapper');    $a.css('opacity');    $a.addClass('in');

// Check it's not just jQuery// does not animatevar e = document.createElement('div');e.className = 'box e';document.getElementById('wrapper').appendChild(e);window.getComputedStyle(e).opacity;e.className += ' in';

.box {   opacity: 0;  -webkit-transition: all 2s;     -moz-transition: all 2s;          transition: all 2s;      background-color: red;  height: 100px;  width: 100px;  margin: 10px;}
.box.in {    opacity: 1;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><div id="wrapper"></div>

Animate a div from bottom to top with css

Show Card description on Card hover

Completely flexible and responsive

No hard-coded or arbitrary heights, no JS involved.

Basically,

• translateY the title to -100%, on hover animate to 0
• Wrap both title and content into a DIV (i.e: .anim)
• translateY .anim to +100%, and on hover animate it to 0

Open the example in full page to see what happens and how it works:

/*QuickReset*/*{margin:0;box-sizing:border-box;}

.thumb {
  width: 140px;
  background: #eee;
}

.anim {
  transition: 0.5s;
  transform: translateY(100%);
}

.title {
  color: red;
  transition: 0.5s;
  transform: translateY(-100%);
}

.author {
  color: blue;
}

/* ANIMATE */

.thumb:hover .anim,
.thumb:hover .title {
  transform: translateY(0);
}

<div class="thumb">
  <div class="anim">
    <div class="title">The movie even longer title</div>
    <div class="description">
      Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover
    </div>
  </div>
  <div class="author">Published by super long some Author</div>
</div>

---

Related Topics