Css Animation "fullscreen" mode - html

Question

I have an element on screen that i would like to go full screen. I have done this, by using the following css
.fullscreen {
z-index: 2000;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
padding: 15px;
background-color: white;
}
Now i would like to have a nice animation when my element is clicked, so it looks a bit sexy as it maximizes and the same when it minimizes.
Can this be done??
I have tried transition: top .15s linear; but that doesnt seem to work
NOTE
I cannot have the element start with position:fixed using css, unless i had to use javascript to toggle it, as this is a normal html element, so i do not always want it fixed.
here is the fiddle where i got the css from to go fullscreen, so you can see what i mean. http://jsfiddle.net/a7nzy6w6/1/

Answer 1

The position property can't be animated. If you start with position: fixed, it's no problem.
Fiddle: http://jsfiddle.net/a7nzy6w6/299/
#myDiv.fullscreen {
z-index: 9999;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#myDiv {
position: fixed;
width: 500px;
height: 400px;
top: 20px;
left: 20px;
transition: all .15s linear;
background: #cc0000;
}
Note that using JavaScript you could find the position on the page and set it to fixed at the position as to not have to start with position: fixed, but that's outside the scope of this question.
Following up on comments to include a fade transition with CSS transition and jQuery for class toggles:
CSS:
#myDiv.fullscreen {
z-index: 9999;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#myDiv.fade {
opacity: 0;
}
#myDiv {
width: 500px;
height: 400px;
top: 20px;
left: 20px;
background: #cc0000;
transition: opacity .15s linear;
}
JS:
$('button').click(function(e) {
var $div = $('#myDiv');
$div.toggleClass('fade');
setTimeout(function(){
$div.toggleClass('fade fullscreen');
}, 150);
});
Fiddle: http://jsfiddle.net/a7nzy6w6/308/

Answer 2

You need to use transition
$('button').click(function(e){
$('#myDiv').toggleClass('fullscreen');
});
#myDiv{
background:#c99;
top: 0;
left: 0;
position: fixed;
width:500px;
height:400px;
transition: all 1s ease;
}
#myDiv.fullscreen{
z-index: 9999;
width: 100%;
height: 100%;
transition: all 1s ease;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div id="myDiv">
my div
<button>Full Screen</button>
</div>
</div>
</div>

Answer 3

Try this
<div class="row">
<div class="col-lg-12">
<div id="myDiv">
my div
<button>Full Screen</button>
</div>
</div>
</div>
#myDiv.fullscreen{
z-index: 9999;
min-width: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
}
#myDiv{
background:#cc0000;
min-width:500px;
max-width: 500px;
min-height:400px;
transition: all 500ms;
}
live demo - http://jsfiddle.net/a7nzy6w6/306/