Question: I know that I can fade in and out with jquery, but on mobile it will be jittery and like low fps or something. After a lot of searching I've found out I can use css3 transition to go to opacitiy 0, but the problem is the element will still have the place to itself. even with visibility:none, it will keep the space it was in. the only way is to use display:none but as I know I can't animate that.
So is there a way to achieve smooth fade in and out animation on mobile with a combination of jquery and css3? or even just one? Thank you.

`**EDIT**`: Okay the answer for fadeout is working pretty well, now a fade in would be sweet. the problem is I think I have to pul a millisecond delay after `('#id').css('display','block')` and before `('#id').css('opactity','1')`. don't if it is efficient and all. but it works that way but all my other animations wouldn't work. still am really confused.

Answer: 
You should always try and use CSS3 transitions, instead of jQuery animations. Here I use a CSS3 transition to fade out the `.square`, and then I wait until the transition has ended to set the `display` to `none`.

If you animate an element in jQuery, for example, using `fadeOut`, you'll see what happens. It basically sets the opacity to 1, and then brings that value down to 0 in tiny increments. This is very inefficient. So it's better to always use CSS3 transitions and animations wherever possible.

Fade out: <https://jsfiddle.net/danhaswings/znLL0ws5/1/>

Fade in: <https://jsfiddle.net/danhaswings/kjgmxa8x/>

**HTML**

```
<div class="square"></div>

```

**CSS**

```
.square {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: opacity 1s ease-in-out;
}

```

**jQuery**

```
var $square = $('.square');

$square.css('opacity', '0');

$square.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() {
    $(this).css('display', 'none');
});

```
What sort of phone are you testing on to get such slow / jittery animations? Mine seems to work fine for all of the animations that are supported on mobile browsers.

In any case, you can always try to use css keyframes.

Annoyingly, you cannot animate certain attributes (such as `display`) but it does allow for quite a lot of things including opacity as shown below.

```css
div {
  width: 100px;
  height: 100px;
  background: red;
  margin: 20px;
}
.to_hide {
  -webkit-animation: hide 5s forwards;
  animation: hide 2s forwards;
}
@-webkit-keyframes hide {
  from {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
    position: absolute;
    opacity: 0;
  }
}
```

```html
<div class="to_hide"></div>
<div></div>
```

* [Keyframes on MDN](https://developer.mozilla.org/en/docs/Web/CSS/@keyframes)

---

Ultimately, on mobiles you should try to avoid using animations as mobile browsers are not optimized for such things. Your website should degrade gracefully in both size, layout, content and also animations.