Develop Reference

HTML,CSS Remaining traces on the page after the animation video is finished

When the smoke animation is finished, it stays a little on the bottom right. I don't want to see this and try to fix this.
How do I solve this problem? I showed the problems in the picture. Additionally, the smoke.mp4 link is below.
body
{
margin: 0;
padding: 0;
background:black;
}
section {
height: 100vh;
background: #000;
}
video {
object-fit: cover;
}
h1 {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: #ddd;
font-size: 5em;
font-family: sans-serif;
letter-spacing: 0.2em;
}
h1 span {
display: inline-block;
animation: animate 1s linear forwards;
}
#keyframes animate {
0% {
opacity: 0;
transform: rotateY(90deg);
filter: blur(10px);
}
100% {
opacity: 1;
transform: rotateY(0deg);
filter: blur(0px);
}
}
h1 span:nth-child(1) {
animation-delay: 1s;
}
h1 span:nth-child(2) {
animation-delay: 1.5s;
}
h1 span:nth-child(3) {
animation-delay: 2s;
}
h1 span:nth-child(4) {
animation-delay: 2.5s;
}
h1 span:nth-child(5) {
animation-delay: 3s;
}
h1 span:nth-child(6) {
animation-delay: 3.75s;
}
h1 span:nth-child(7) {
animation-delay: 4s;
}
h1 span:nth-child(8) {
animation-delay: 4.5s;
}
<section>
<video src="smoke.mp4" autoplay muted></video>
<h1>
<span>W</span>
<span>E</span>
<span>L</span>
<span>C</span>
<span>O</span>
<span>M</span>
<span>E</span>
</h1>
</section>
smoke video link: https://drive.google.com/file/d/1ncI67cgjRGoQZHF6I0dEpXwvFwCKxFPK/view

It looks like your video's last frame is not completely black. What you can do is listen for the ended event of the video and then hide it.
document
.querySelector('video')
.addEventListener('ended', function(e) {
e.target.style.display = 'none';
});
// ofcourse you could toggle a class that hides it
// instead of setting an inline style
body {
margin: 0;
padding: 0;
background: black;
}
section {
height: 100vh;
background: #000;
}
video {
width:100%;
height:100%;
object-fit: cover;
}
h1 {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: #ddd;
font-size: 8vw;
font-family: sans-serif;
letter-spacing: 0.2em;
}
h1 span {
display: inline-block;
animation: animate 1s linear forwards;
}
#keyframes animate {
0% {
opacity: 0;
transform: rotateY(90deg);
filter: blur(10px);
}
100% {
opacity: 1;
transform: rotateY(0deg);
filter: blur(0px);
}
}
h1 span:nth-child(1) {
animation-delay: 1s;
}
h1 span:nth-child(2) {
animation-delay: 1.5s;
}
h1 span:nth-child(3) {
animation-delay: 2s;
}
h1 span:nth-child(4) {
animation-delay: 2.5s;
}
h1 span:nth-child(5) {
animation-delay: 3s;
}
h1 span:nth-child(6) {
animation-delay: 3.75s;
}
h1 span:nth-child(7) {
animation-delay: 4s;
}
h1 span:nth-child(8) {
animation-delay: 4.5s;
}
<section>
<video src="https://drive.google.com/uc?export=download&id=1ncI67cgjRGoQZHF6I0dEpXwvFwCKxFPK" autoplay muted></video>
<h1>
<span>W</span>
<span>E</span>
<span>L</span>
<span>C</span>
<span>O</span>
<span>M</span>
<span>E</span>
</h1>
</section>

I'm trying to understand how to make 2 classes hover at same time

.ellenon {
box-sizing: border-box;
width: 350px;
height:350px;
background-image: url("https://wallpapercave.com/wp/wp5609581.jpg");
filter: grayscale(100%);
color:white;
transition: 0.5s;
}
.ellenon :where(h1, p) {
line-height:1.5em;
letter-spacing: 1.1px;
padding-right: 10px;
padding-left: 10px;
transition: 0.5s;
}
.ellenon:hover {
filter: grayscale(0%);
}
.ellenon h1:hover {
transform: translate(0px, -20px);
color:transparent;
transition: 0.5s;
}
.ellenon p:hover {
transform: translate(0px, 20px);
color:transparent;
transition: 0.5s;
}
.ellenon2:hover {
transform: translate(0px, -20px);
color:transparent;
}
<div class="ellenon"><a href="https://codepen.io/" class="ellenon2"><h1>What is Lorem Ipsum?</h1> <p>
Lorem Ipsum is simply dummy text</p></a></div>
Hello there, I am trying to create a simple CSS animation as you can see in my code. However, I can't understand how to execute both hovers once the user hovers over the external div. Is this possible with raw CSS or JS is needed?
Thanks

You can select the .outer:hover and .outer:hover .inner so both will change when the outer is hovered
.outer{
width:100px;
height:100px;
background-color:orange;
}
.inner{
width:50px;
height:50px;
background-color:blue;
}
.outer:hover{
background-color:green;
}
.outer:hover .inner{
background-color:red;
}
<div class="outer">
<div class="inner"></div>
</div>

use .one:hover .two . if you have hover on .one you change .two

Image slider got stuck after first button click

I got a question regarding an image slider that I am creating from scratch. I want to create it from scratch due to the fact that I do not need a lot of extra properties which I could get from using external sliders.
I have the following setup:
var num_of_images = $( ".image-holder" ).length;
var visible_images = 2;
$( "#slide-right" ).click(function() {
$(".hold-1").addClass('first');
});
.col-slider{
position:relative;
z-index:13;
margin-top:0px;
width:70%;
overflow:hidden;
height:174px;
background-color:yellow;
}
.image-holder {
width: 175px;
height: 174px;
display: flex;
justify-content: center;
align-items: center;
color: white;
margin:0 15px;
float:left;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))
}
.image-holder h2{
font-family: Titillium Web;
text-transform: uppercase;
font-weight:600;
display:inline-block;
width:85%;
text-align:center;
font-size:36px;
}
.col-slider-buttons a{
margin-right:10px;
display:inline-block;
margin-bottom:30px;
}
.first {
-webkit-animation: animateleft 1s ease-out forwards;
-moz-animation: animateleft 1s ease-out forwards;
-ms-animation: animateleft 1s ease-out forwards;
-o-animation: animateleft 1s ease-out forwards;
animation: animateleft 1s ease-out forwards;
}
#keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-moz-keyframes animateleft {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-webkit-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-ms-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-o-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-slider-buttons">
<a id="slide-left" href="#">Left</a>
<a id="slide-right" href="#">Right</a>
</div>
<div class="col-slider">
<div class="image-holder hold-1">
<h2>TEST 1</h2>
</div>
<div class="image-holder hold-2">
<h2>TEST 2</h2>
</div>
<div class="image-holder hold-3">
<h2>TEST 3</h2>
</div>
<div class="image-holder hold-4">
<h2>TEST 4</h2>
</div>
</div>
What I am trying to achieve is that whenever I press the right button the margin got shifted towards the left. But I need some kind of mechanism to detect that. Have anyone an idea on how I could implement that? I do not ask for full code implementations. Any guidance is already very helpfull.
To be short: desired setup: being able to navigate through the images with the left and right button by shifting the margin towards left and right.
For a JSFIDDLE DEMO: JSFIDDLE

You are only adding the class first to your first holder.. (.hold-1). You can add an additional variable (counter) and add it the following way:
$(".hold-" + counter +"").addClass('first');
Have a look below:
var num_of_images = $( ".image-holder" ).length;
var visible_images = 2;
var counter = 1;
$( "#slide-right" ).click(function() {
$(".hold-" + counter +"").addClass('first');
counter = counter + 1;
});
.col-slider{
position:relative;
z-index:13;
margin-top:0px;
width:70%;
overflow:hidden;
height:174px;
background-color:yellow;
}
.image-holder {
width: 175px;
height: 174px;
display: flex;
justify-content: center;
align-items: center;
color: white;
margin:0 15px;
float:left;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))
}
.image-holder h2{
font-family: Titillium Web;
text-transform: uppercase;
font-weight:600;
display:inline-block;
width:85%;
text-align:center;
font-size:36px;
}
.col-slider-buttons a{
margin-right:10px;
display:inline-block;
margin-bottom:30px;
}
.first {
-webkit-animation: animateleft 1s ease-out forwards;
-moz-animation: animateleft 1s ease-out forwards;
-ms-animation: animateleft 1s ease-out forwards;
-o-animation: animateleft 1s ease-out forwards;
animation: animateleft 1s ease-out forwards;
}
#keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-moz-keyframes animateleft {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-webkit-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-ms-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-o-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-slider-buttons">
<a id="slide-left" href="#">Left</a>
<a id="slide-right" href="#">Right</a>
</div>
<div class="col-slider">
<div class="image-holder hold-1">
<h2>TEST 1</h2>
</div>
<div class="image-holder hold-2">
<h2>TEST 2</h2>
</div>
<div class="image-holder hold-3">
<h2>TEST 3</h2>
</div>
<div class="image-holder hold-4">
<h2>TEST 4</h2>
</div>
</div>
Hope it helped

I've added/changed these lines of code:
$(".hold-"+ ($('.image-holder.first').length + 1)).addClass('first');
What it does: It counts the amount of elements that has both class' image-holder & first. Then i adds 1, to get the value of the hold- class we want to add our class to
var num_of_images = $(".image-holder").length;
var visible_images = 2;
$("#slide-right").click(function() {
$(".hold-"+ ($('.image-holder.first').length + 1)).addClass('first');
});
.col-slider {
position: relative;
z-index: 13;
margin-top: 0px;
width: 70%;
overflow: hidden;
height: 174px;
background-color: yellow;
}
.image-holder {
width: 175px;
height: 174px;
display: flex;
justify-content: center;
align-items: center;
color: white;
margin: 0 15px;
float: left;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))
}
.image-holder h2 {
font-family: Titillium Web;
text-transform: uppercase;
font-weight: 600;
display: inline-block;
width: 85%;
text-align: center;
font-size: 36px;
}
.col-slider-buttons a {
margin-right: 10px;
display: inline-block;
margin-bottom: 30px;
}
.first {
-webkit-animation: animateleft 1s ease-out forwards;
-moz-animation: animateleft 1s ease-out forwards;
-ms-animation: animateleft 1s ease-out forwards;
-o-animation: animateleft 1s ease-out forwards;
animation: animateleft 1s ease-out forwards;
}
#keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-moz-keyframes animateleft {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-webkit-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-ms-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-o-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-slider-buttons">
<a id="slide-left" href="#">Left</a>
<a id="slide-right" href="#">Right</a>
</div>
<div class="col-slider">
<div class="image-holder hold-1">
<h2>TEST 1</h2>
</div>
<div class="image-holder hold-2">
<h2>TEST 2</h2>
</div>
<div class="image-holder hold-3">
<h2>TEST 3</h2>
</div>
<div class="image-holder hold-4">
<h2>TEST 4</h2>
</div>
</div>

CSS slide does not slide, but just appears

I am trying to get div#project-wrapper to slide down when a.post-link is clicked at which point div.post-container gets the fadeOutDown class added through JS and fades in from the top. I'm having a couple problems:
1) div#project-wrapper, which gets the activated class added through JS, does not slide down when a.post-link is clicked. Instead it just appears.
2) The fadeOutDown class gets added to .post-container but the div doesn't do any of the CSS animations I wrote.
Can somebody please help me with this?
Fiddle: http://jsfiddle.net/eLooLb4c/2/
HTML
<div id="project-wrapper">
<img id="loading-animation" src="http://i.imgur.com/5RMfW8P.gif">
<div id="project-container">
<div class="post-container fadeOutDown">
<div id="project-left-content">
<h1 class="entry-title">Test 1</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<div id="project-right-content"></div>
</div><!-- #post-## -->
</div>
</div>
<a class="post-link" href="#">post link</a>
CSS
#project-wrapper {
background: #000;
color: #fff;
display: none;
margin: 0 1%;
position: relative;
transform: translateY(-100%);
-webkit-transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
}
#project-wrapper.activated {
display: block;
transform: translateY(0);
}
#project-wrapper #loading-animation {
display: none;
left: 0;
position: absolute;
top: 0;
}
#project-wrapper #project-container {
overflow: hidden;
padding: 40px;
}
#-webkit-keyframes fadeOutDown {
0% {
opacity: 0;
-webkit-transform: translate(0, -10px);
transform: translate(0, -10px);
}
100% {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
#keyframes fadeOutDown {
0% {
opacity: 0;
margin-bottom: -10px;
-webkit-transform: translate(0, -10px);
transform: translate(0, -10px);
}
100% {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
#project-wrapper #project-container .post-container #project-left-content {
float: left;
margin-right: 4%;
width: 40%;
}
#project-wrapper #project-container .post-container h1 {
font-family: Helvetica,sans-serif;
text-transform: uppercase;
font-size: 40px;
font-size: 3em;
font-weight: bold;
line-height: 1.1;
margin-bottom: 0.8em;
}
#project-wrapper #project-container .post-container #project-right-content {
background: #222;
float: left;
height: 350px;
margin-top: 10px;
width: 56%;
}
JS
$('.post-link').click(function(e) {
e.preventDefault();
function projectShow() {
$('#project-wrapper').addClass('activated');
$('.post-container').addClass('fadeOutDown');
}
if ($(window).scrollTop() != 0) {
$('html, body').animate({
scrollTop : 0
},500, projectShow);
} else {
projectShow();
}
});

This doesn't solve you first problem but the second problem is because you haven't given a time to your animation. See edit i figured out the first part too Fiddle
$('.post-link').click(function(e) {
e.preventDefault();
function projectShow() {
$('#project-wrapper').addClass('activated' );
$('.post-container').addClass('fadeOutDown');
}
if ($(window).scrollTop() != 0) {
$('html, body').animate({
scrollTop : 0
},500, projectShow);
} else {
projectShow();
}
});
#project-wrapper {
background: #000;
color: #fff;
display: none;
margin: 0 1%;
position: relative;
transform: translateY(-100%);
-webkit-transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
}
#project-wrapper.activated {
display: block;
transform: translateY(0);
}
#project-wrapper #loading-animation {
display: none;
left: 0;
position: absolute;
top: 0;
}
#project-wrapper #project-container {
overflow: hidden;
padding: 40px;
}
#-webkit-keyframes fadeOutDown {
0% {
opacity: 0;
-webkit-transform: translate(0, -10px);
transform: translate(0, -10px);
}
100% {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
#keyframes fadeOutDown {
0% {
opacity: 0;
margin-bottom: -10px;
-webkit-transform: translate(0, -10px);
transform: translate(0, -10px);
}
100% {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown 5s;
animation-name: fadeOutDown;
}
.fadeOutDown {
-webkit-animation: fadeOutDown 5s;
animation-name: fadeOutDown;
}
#project-wrapper #project-container .post-container #project-left-content {
float: left;
margin-right: 4%;
width: 40%;
}
#project-wrapper #project-container .post-container h1 {
font-family: Helvetica,sans-serif;
text-transform: uppercase;
font-size: 40px;
font-size: 3em;
font-weight: bold;
line-height: 1.1;
margin-bottom: 0.8em;
}
#project-wrapper #project-container .post-container #project-right-content {
background: #222;
float: left;
height: 350px;
margin-top: 10px;
width: 56%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="project-wrapper">
<img id="loading-animation" src="http://i.imgur.com/5RMfW8P.gif">
<div id="project-container">
<div class="post-container">
<div id="project-left-content">
<h1 class="entry-title">Test 1</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<div id="project-right-content"></div>
</div><!-- #post-## -->
</div>
</div>
<a class="post-link" href="#">post link</a>
Edit FIDDLE
I removed the display:block from here
#project-wrapper.activated {
transform: translateY(0);
}
and i edited the jquery like this
function projectShow() {
$('#project-wrapper').show(500);
$('#project-wrapper').addClass('activated');
$('.post-container').addClass('fadeOutDown');
}
$('.post-link').click(function (e) {
e.preventDefault();
function projectShow() {
$('#project-wrapper').show(500);
$('#project-wrapper').addClass('activated');
$('.post-container').addClass('fadeOutDown');
}
if ($(window).scrollTop() != 0) {
$('html, body').animate({
scrollTop: 0
}, 500, projectShow);
} else {
projectShow();
}
});
#project-wrapper {
background: #000;
color: #fff;
display: none;
margin: 0 1%;
position: relative;
transform: translateY(-100%);
-webkit-transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
}
#project-wrapper.activated {
transform: translateY(0);
}
#project-wrapper #loading-animation {
display: none;
left: 0;
position: absolute;
top: 0;
}
#project-wrapper #project-container {
overflow: hidden;
padding: 40px;
}
#-webkit-keyframes fadeOutDown {
0% {
opacity: 0;
-webkit-transform: translate(0, -10px);
transform: translate(0, -10px);
}
100% {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
#keyframes fadeOutDown {
0% {
opacity: 0;
margin-bottom: -10px;
-webkit-transform: translate(0, -10px);
transform: translate(0, -10px);
}
100% {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
.fadeOutDown {
-webkit-animation: fadeOutDown 5s;
animation: fadeOutDown 5s;
}
#project-wrapper #project-container .post-container #project-left-content {
float: left;
margin-right: 4%;
width: 40%;
}
#project-wrapper #project-container .post-container h1 {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
font-size: 40px;
font-size: 3em;
font-weight: bold;
line-height: 1.1;
margin-bottom: 0.8em;
}
#project-wrapper #project-container .post-container #project-right-content {
background: #222;
float: left;
height: 350px;
margin-top: 10px;
width: 56%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="project-wrapper">
<img id="loading-animation" src="http://i.imgur.com/5RMfW8P.gif">
<div id="project-container">
<div class="post-container">
<div id="project-left-content">
<h1 class="entry-title">Test 1</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<div id="project-right-content"></div>
</div>
<!-- #post-## -->
</div>
</div>
<a class="post-link" href="#">post link</a>

Since you are using jquery, you could save yourself some of the trouble and all this css and use something like this:
function projectShow() {
$('#project-wrapper').slideDown();
$('.post-container').hide().fadeIn();
}
Fiddle: updated example

Off-canvas menu and a fixed positioned header

I am creating a very basic off canvas menu, everything is working brilliantly BUT this one small thing that I can't fix!
Visit www.loaistudio.com and re-size the window to under 1000px.
Scroll down a bit and then click on the Menu button from the top left on the header.
Why does it despair? it actually does not despair but it just move to the very top of the page! Why is that? How can I fix it and just keep it to the top of the view area...
Here is the HTML
<div id="page"><!--Main Container-->
<!--Header (small screens only)-->
<div id="secondHeader">
<a class="secondHeader-menuButton" href="#">Menu</a>
<p id="logo-smallScreen">Website Name</p>
</div>
<!--/////////////////////////////////////////////////-->
<div class="wrapper">
<div id="homeSectionA" class="content">
<h1>Header One</h1>
<h2>Header Two</h2>
<h3>Header Three</h3>
<h4>Header Four</h4>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<br>
<p><strong>Paragraph Strong</strong></p>
<p><em>Paragraph Empaissaied</em></p>
<p><small>Paragraph Small</small></p>
<br>
<a>I am a Button</a>
<br><br>
<p><strong>List</strong></p>
<ul>
<li>List Item</li>
<li>List Item
<ul>
<li>Sub List Item</li>
<li>Sub List Item</li>
</ul>
</li>
</ul>
<br>
<p><strong>List</strong></p>
<ol>
<li>List Item</li>
<li>List Item
<ol>
<li>Sub List Item</li>
<li>Sub List Item</li>
</ol>
</li>
</ol>
<br>
<p>Abber (<abbr title="Oh, you found me :)">Hover over me</abbr>).</p>
<br>
<p>Paragraph<sub>subscript.</sub></p>
<br>
<p>Paragraph<sup>subscript.</sup></p>
<br>
<p>Paragraph<mark>Marked Line</mark></p>
<br>
<img alt="" src="http://placehold.it/600x400/cdcdcd">
</div>
</div>
<!--Footer-->
<footer id="footer">
<?php include ("assets/templates/footer.inc"); ?>
</footer>
</div><!--The End Of The Page-->
CSS
/* Landscape Tablets //////////////////////////////////////////////////////////////////////////////////*/
#media screen and (max-width: 1024px) {
body, #headerContent {
min-width: 100%;
}
/*PAGE LAYOUT ==================================================================*/
/*Main Page Container*/#page {
padding-top: 50px;
z-index: 1;
-webkit-box-shadow: -3px 0px 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: -3px 0px 20px rgba(0, 0, 0, 0.8);
box-shadow: -3px 0px 20px rgba(0, 0, 0, 0.8);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
/*Content Container*/
.content {
padding: 30px;
}
/*HEADER ======================================================================*/
/*Header Wrapper*/
#headerWrapper {
background-color: #191E25;
width: 200px; height: 100%;
z-index: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transform: translate(-200px, 0px);
-moz-transform: translate(-200px, 0px);
-o-transform: translate(-200px, 0px);
-ms-transform: translate(-200px, 0px);
transform: translate(-200px, 0px);
}
#headerWrapper.headerOpen {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
#page.pageOpen {
-webkit-transform: translate(200px, 0px);
-moz-transform: translate(200px, 0px);
-o-transform: translate(200px, 0px);
-ms-transform: translate(200px, 0px);
transform: translate(200px, 0px);
}
/*Header Content Container*/
#headerContent {
width: 210px; height: 100%;
padding: 0;
margin: 0;
overflow-y: auto;
overflow-x: hidden;
}
/*Header Logo*/
#headerLogo {
display: none;
}
/*Main Menu*/
#mainMenu, #mainMenu li {
text-align: left;
margin-top: 0;
float: none;
}
#mainMenu a {
color: #A0A8B1;
border-bottom: 1px solid #13171C;
width: 100%;
padding: 20px 0px 20px 20px;
margin: 0;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#mainMenu a:hover {
color: #CACFD3;
background-color: #232A34;
}
#mainMenu a.active {
color: #6E737A;
background-color: #13171C;
}
/*Second Header Container & Elements (Hidden From Widescreen)*/
#secondHeader {
color: #FFFFFF;
background-color: #49AB8E;
border-bottom: 1px solid #398770;
width: 100%;
display: block;
position: fixed; top: 0;
padding: 0 20px 0 0;
z-index: 1000;
line-height: 50px;
}
.secondHeader-menuButton {
background: #41997F url('../../assets/elements/nav-icon.png') no-repeat 20px;
background-size: 25px 24px;
width: 120px;
display: inline-block;
font-weight: bold;
text-indent: 55px;
}
.secondHeader-menuButton-active {
background: #41997F url('../../assets/elements/nav-icon-close.png') no-repeat 20px;
background-size: 25px 24px;
}
#logo-smallScreen {
display: inline-block;
float: right;
}
/*PAGES ======================================================================*/
/*Contact Page*/
#contactDetails {
width: 50%;
padding-left: 50px;
margin-left: -6px;
text-align: center;
}
#contactForm {
width: 50%;
}
}
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Portrait Tablets ///////////////////////////////////////////////////////////////////////////////////*/
#media screen and (max-width: 770px) {
/*PAGE LAYOUT =================================================================*/
/*Content Container*/.content {
padding: 20px;
}
/*PAGES ======================================================================*/
/*Contact Page*/
#contactDetails, #contactForm {
width: 100%;
padding: 0;
margin: 0;
}
#contactDetails {
margin-top: 30px;
}
}
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Phones /////////////////////////////////////////////////////////////////////////////////////////////*/
#media screen and (max-width: 500px) {
/*PAGES ======================================================================*/
/*Contact Page*/
#contactDetails-normal {
display: none;
}
#contactDetails-smart {
display: block;
border-top: 1px solid #CED1D6;
padding-top: 30px;
}
#contactDetails-smart a {
color: #FFFFFF;
background-color: #49AB8E;
width: 100%;
padding: 10px 15px;
margin-bottom: 10px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#contactDetails-smart a:hover,
#contactDetails-smart a:active {
background-color: #398770;
}
}
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Mini Devices ///////////////////////////////////////////////////////////////////////////////////////*/
#media only screen and (max-width: 290px) {
#logo-smallScreen {
display: none
}
}
JavaScript:
$(document).ready(function() {
//Prevent clicking on .active links
'use strict'; $('.active').click(function(a) {
a.preventDefault();
});
//Smart Navigation
$(".secondHeader-menuButton").on('touchstart click', function(e) {
e.preventDefault();
$("#page").toggleClass("pageOpen");
$("#headerWrapper").toggleClass("headerOpen");
$(this).toggleClass("secondHeader-menuButton-active");
});
$('.content').on('touchstart click', function() {
$("#page").removeClass("pageOpen");
$('#headerWrapper').removeClass('headerOpen');
$('.secondHeader-menuButton').removeClass("secondHeader-menuButton-active");
});
});

Try changing your #headerWrapper transitions to:
-moz-transition: -moz-transform 0.2s ease-out;
-o-transition: -o-transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out
As for the header becoming "unfixed" after the translate: this seems to be a known bug in Webkit.
You can fix it by:
1) moving #secondHeader outside of #page:
<body>
<header id="headerWrapper"></header>
<div id="secondHeader"></div>
<div id="page"></div>
</body>
2) adding a new CSS class:
#page.pageOpen, #secondHeader.pageOpen {
-webkit-transform: translate(200px, 0px);
-moz-transform: translate(200px, 0px);
-o-transform: translate(200px, 0px);
-ms-transform: translate(200px, 0px);
transform: translate(200px, 0px);
}
3) add transitions to #secondHeader
#secondHeader {
-moz-transition: -moz-transform 0.2s ease-out;
-o-transition: -o-transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out
}
4) toggling this class via Javascript as well:
$(".secondHeader-menuButton").on('touchstart click', function(e) {
e.preventDefault();
$("#page, #secondHeader").toggleClass("pageOpen");
$("#headerWrapper").toggleClass("headerOpen");
$(this).toggleClass("secondHeader-menuButton-active");
});
$('.content').on('touchstart click', function() {
$("#page, #secondHeader").removeClass("pageOpen");
$('#headerWrapper').removeClass('headerOpen');
$('.secondHeader-menuButton').removeClass("secondHeader-menuButton-active");
});

First of all, the menu doesn't disappear. It is merely moving to the top of #page. When you scroll to the top, you will see it.
This is documented behaviour, see MDN - transform
Summary
...
If the property has a value different than none, a stacking context will be created. In that case the object will act as a containing block for position: fixed elements that it contains.
This means, instead of body, #page will be now the containing block for #secondHeader.
Since secondHeader is position: fixed; top: 0;, it will be now fixed at the top of page.
As #janfoeh has shown, you can "fix" it by moving the inner div outside, and duplicate the necessary transformation on the inner (now outside) div.