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');
});

```
Should go smoothly if you use jQuery's `fadeIn()`, which will fade in an element with  

`display: none`

```
$element.fadeIn();

```

---

```js
function show() {
  $("#el").fadeIn();
}
```

```css
#el {
  display: none;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="show()">Show</button>
<div id="el">Hello</div>
```