I set up a div so that on click of a button the div would expand upwards to view more content. On second click the button would slide down. I used JS to do this and it works fine.
Secondly I have added an animation to the same div so that at certain points within the animation the div slides up and down. As soon as I added this the animation works fine but the transition and on click of the button to slide the div up/down no longer works and I can't understand why?
Below is the code with both transition and animation applied to the div. There are two fiddles one showing the jQuery slide up/down on its own and the second demonstrating the code below.
Any help would really be appreciated.
HTML
<div class="wrapper">
<div class="content-wrapper">
<div class="padLeft">
<h2>Project Title</h2>
<div class="crossRotate"> Open </div>
</div>
<div class="padLeft">
<p>Paragraph Goes Here</p>
<h3>Play Video</h3>
</div>
</div>
</div>
CSS
.wrapper {
width: 100%;
height: 100px;
position: absolute;
overflow: hidden;
margin: 0;
padding:0;
z-index: 1;
}
#-webkit-keyframes titledrop {
0%, 25%, 50%, 75%, 100%{ bottom: -215px;}
5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{ bottom: -90px;}
}
#-moz-keyframes titledrop {
0%, 25%, 50%, 75%, 100%{ bottom: -215px;}
5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{ bottom: -90px;}
}
#keyframes titledrop {
0%, 25%, 50%, 75%, 100%{ bottom: -215px;}
5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{ bottom: -90px;}
}
.content-wrapper {
position: absolute;
z-index: 999;
background: red;
bottom: -90px;
width: 100%;
-webkit-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
-moz-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
-o-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
-ms-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
-webkit-transition: bottom 1s ease-in;
-moz-transition: bottom 1s ease-in;
-o-transition: bottom 1s ease-in;
-ms-transition: bottom 1s ease-in;
transition: bottom 1s ease-in;
}
.crossRotate {
position: absolute;
background-color: blue;
z-index: 1;
cursor: pointer;
}
JS
var clicked=true;
$(".crossRotate").on('click', function() {
if(clicked) {
clicked=false;
$(".content-wrapper").css({"bottom": "-90px"});
} else {
clicked=true;
$(".content-wrapper").css({"bottom": "0"});
}
});
jsFiddle One - http://jsfiddle.net/8ZFMJ/64/
jsFiddle Two - http://jsfiddle.net/8ZFMJ/63/
I dont know what is you want but if i understand it, this is u need. I dont it like this, but u know what u want. Here for help. Regards!
var clicked=false;
$(".crossRotate").on('click', function(){
if(clicked){
clicked=false;
$(".content-wrapper").animate({"height": "162px"});
}else{
clicked=true;
$(".content-wrapper").animate({"height": "280px"});
}
});
http://jsfiddle.net/8ZFMJ/65/
Related
I made a simple text with a transition, appearing from left to right when I hover it in CSS.
My code is very simple, as seen in the snippet.
So of course, when I remove my mouse cursor, it is animated in the other direction and the text disappears from right to left.
BUT
I'd like it to disappear from left to right and then reset so it can appear again from left to right, and that's where I'm stuck.
What would be your approach to get such an effect?
Thanks!
.text{
transition: max-width 700ms linear;
max-width: 0%;
overflow: hidden;
white-space: nowrap;
}
.container:hover .text{
max-width: 100%;
}
.container{
padding: 10px 0 10px 0;
width: fit-content;
}
<div class="container">
<div class="text">THIS IS MY TEXT</div>
</div>
You could use CSS animations for this - in the non-hovered state the text moves to left: 100% position and in the hovered state it moves from the -100% position to the 0 position.
If you do this with transitions (rather than setting position left) then the container will maintain the width of the child text.
The wrinkle with this approach is that the very first time, ie onload, the text can be seen going from left to right. To get round this this snippet has a little bit of a hack, the container has opacity 0 for the fist 700ms of the page's life and then is seen.
.text {
display: inline-block;
width: fit-content;
animation: out linear 700ms forwards;
transform: translateX(100%);
}
#keyframes out {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
.container:hover .text {
transform: translateX(0%);
animation: in linear 700ms;
}
#keyframes in {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
.container {
padding: 10px 0 10px 0;
width: fit-content;
rheight: fit-content;
animation: reveal 700ms linear;
overflow: hidden;
}
#keyframes reveal {
0%,
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="container">
<div class="text">THIS IS MY TEXT</div>
</div>
I managed to do it, thanks to A Haworth for pointing me in the right direction.
I now need to retrieve the actual clip-path value so when the mouse is not over before the end of the animation, it doesn't 'jump' like this. I guess I'll need some JS here if this is even possible to do.
.text{
animation: out linear 700ms forwards;
}
.container:hover .text{
animation: in linear 700ms;
}
.container{
padding: 10px 0 10px 0;
width: fit-content;
animation: reveal 700ms linear;
}
#keyframes in {
0% {
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
100% {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
}
#keyframes out {
0% {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
100% {
clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
}
}
#keyframes reveal {
0%,
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="container">
<div class="text">THIS IS MY TEXT</div>
</div>
<p class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe, praesentium.</p>
.text{
transition: max-width 700ms linear;
opacity: 0;
height: 20px;
overflow: hidden;
max-width: 0px;
}
.text:hover{
opacity: 1;
max-width: 100%;
}
So I'm adding animation classes to a body element (and the tab element) on the click of the tab using css animation and jquery addClass. It works just fine in Chrome but in Firefox only the tab gets the animation class added...
Here's my jquery;
$('.lightboxContentReplace').on('click', '.v4-til-tab-label', function(event) {
var target = $(event.target);
var targetID = target.attr('data-label');
var content = $("[data-content=" + targetID + "]");
$(".v4-til-tab-label").removeClass('tab-label-animation');
$(".v4-til-tab-content").removeClass('tab-content-animation');
target.addClass('tab-label-animation');
content.addClass('tab-content-animation');
$(".v4-til-tab-content").hide();
$("[data-content=" + targetID + "]").show(); });
and here's my css;
#-webkit-keyframes tab-label-focus {
0% { top: 0;}
100% {top: -5px; border-bottom: 2px solid rgba(0, 188, 141, 0.4)}
}
#-moz-keyframes tab-label-focus {
0% { top: 0;}
100% {top: -5px; border-bottom: 2px solid rgba(0, 188, 141, 0.4)}
}
#-o-keyframes tab-label-focus {
0% { top: 0;}
100% {top: -5px; border-bottom: 2px solid rgba(0, 188, 141, 0.4)}
}
#keyframes tab-label-focus {
0% { top: 0;}
100% {top: -5px; border-bottom: 2px solid rgba(0, 188, 141, 0.4)}
}
.tab-label-animation {
-webkit-animation: tab-label-focus .25s forwards;
-moz-animation: tab-label-focus .25s forwards;
-o-animation: tab-label-focus .25s forwards;
animation: tab-label-focus .25s forwards;
outline: none;
}
#-webkit-keyframes tab-content-focus {
0% { opacity: 0;}
100% {opacity: 100%;}
}
#-moz-keyframes tab-content-focus {
0% { opacity: 0;}
100% { opacity: 1;}
}
#-o-keyframes tab-content-focus {
0% { opacity: 0;}
100% {opacity: 100%;}
}
#keyframes tab-content-focus {
0% { opacity: 0;}
100% { opacity: 1;}
}
.tab-content-animation {
-webkit-animation: tab-content-focus .75s forwards;
-moz-animation: tab-content-focus .75s forwards;
-o-animation: tab-content-focus .75s forwards;
animation: tab-content-focus .75s forwards;
}
Any suggestions would be greatly appreciated!
I'm developing a website but I want to set a random background in CSS.
Right now, I have this code CSS:
#bg {
-moz-transform: scale(1.0);
-webkit-transform: scale(1.0);
-ms-transform: scale(1.0);
transform: scale(1.0);
-webkit-backface-visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1;
}
#bg:before, #bg:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#bg:before {
-moz-transition: background-color 2.5s ease-in-out;
-webkit-transition: background-color 2.5s ease-in-out;
-ms-transition: background-color 2.5s ease-in-out;
transition: background-color 2.5s ease-in-out;
-moz-transition-delay: 0.75s;
-webkit-transition-delay: 0.75s;
-ms-transition-delay: 0.75s;
transition-delay: 0.75s;
background-image: linear-gradient(to top, rgba(19, 21, 25, 0.5), rgba(19, 21, 25, 0.5)), url("../../images/overlay.png");
background-size: auto, 256px 256px;
background-position: center, center;
background-repeat: no-repeat, repeat;
z-index: 2;
}
#bg:after {
-moz-transform: scale(1.125);
-webkit-transform: scale(1.125);
-ms-transform: scale(1.125);
transform: scale(1.125);
-moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out;
-webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out;
-ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out;
transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
background-image: url("../../images/bg_01.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
}
body.is-article-visible #bg:after {
-moz-transform: scale(1.0825);
-webkit-transform: scale(1.0825);
-ms-transform: scale(1.0825);
transform: scale(1.0825);
-moz-filter: blur(0.2rem);
-webkit-filter: blur(0.2rem);
-ms-filter: blur(0.2rem);
filter: blur(0.2rem);
}
body.is-loading #bg:before {
background-color: #000000;
}
And I made this JS code to change the background:
var images = ['bg_01.jpg',
'bg_02.jpg',
'bg_03.jpg',
'bg_04.jpg',
'bg_05.jpg',
'bg_06.jpg',
'bg_07.jpg',
'bg_08.jpg',
'bg_09.jpg',
'bg_10.jpg'];
$('body').css({'background-image' : 'url(../../images/' + images[Math.floor(Math.random() * images.length)] + ')']);
I want to use the JS code in #bg:after, how can I do that? do I need to change something in the js code? the backgrounf works good because I'm using a free template but I want to keep that code because has animations, etc. and I just would like to make it random every refresh.
PS: Sorry, but I'm noob in this.
CODE UPDATED AND WORKING
I've found the solution. First I had to remove the line:
background-image: url("../../images/bg_01.jpg");
From #bg:after block. Then, I changed my javascript code like this:
var images = ['bg_01.jpg',
'bg_02.jpg',
'bg_03.jpg',
'bg_04.jpg',
'bg_05.jpg',
'bg_06.jpg',
'bg_07.jpg',
'bg_08.jpg',
'bg_09.jpg',
'bg_10.jpg'];
$('#bg').css({'background-image' : 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
Now, my website change the background every refresh :)
Thanks a lot for your help!
Your question is not very clear. I assume that you want to have a div with a random background and transition between image and color.
First you js line should be...
$('body').style.backgroundImage = "url(../../images/" + images[Math.floor(Math.random() * images.length)] + ")";
Here is an example of what I think you want to achieve.
var div = document.getElementById("myDiv");
var images = [
"https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Kitten_in_Rizal_Park%2C_Manila.jpg/1200px-Kitten_in_Rizal_Park%2C_Manila.jpg",
"https://www.sdhumane.org/wp-content/uploads/2017/06/10k_nova-0.jpg",
"https://4fi8v2446i0sw2rpq2a3fg51-wpengine.netdna-ssl.com/wp-content/uploads/2016/06/KittenProgression-Darling-week3.jpg",
"http://www.catster.com/wp-content/uploads/2017/12/A-gray-kitten-meowing.jpg"
];
div.onmouseover = function()
{
div.style.backgroundImage = "url(" + images[Math.round(Math.random() * images.length)] + ")";
}
#myDiv
{
width: 250px;
height: 250px;
background-size: 250px 250px;
}
#colorOverlay
{
width: 250px;
height: 250px;
background: gold;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
#colorOverlay:hover
{
opacity: 0;
}
<div id="myDiv">
<div id="colorOverlay">
</div>
</div>
(*This example has issues if you change the images too fast because completely loads them again every time.)
It sets a new image when the mouse is hovered over the div. You can instead do it once when the page loads. To fade from color to the image, the only way I think there is is to have two divs, one with the image, one with the color.
I have got the scrolling clouds but I need a dawn/dusk and day/night cycle by detecting the system clock. I'm not sure how to detect system time with html or css.
I tried transitions with a delay but its not working.
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
#clouds {
padding: 100px 0;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
.cloud {
width: 200px;
height: 60px;
background-color: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud:before,
.cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px;
height: 80px;
position: absolute;
top: -15px;
left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px;
height: 120px;
top: -55px;
left: auto;
right: 15px;
}
.x1 {
left: -250px;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
-webkit-animation: moveclouds 120s linear infinite;
-moz-animation: moveclouds 120s linear infinite;
-o-animation: moveclouds 120s linear infinite;
}
.x2 {
right: 70px;
top: -100px;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.7;
-webkit-animation: moveclouds 140s linear infinite;
-moz-animation: moveclouds 140s linear infinite;
-o-animation: moveclouds 140s linear infinite;
}
.x3 {
left: -550px;
top: -200px;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
opacity: 0.8;
-webkit-animation: moveclouds 150s linear infinite;
-moz-animation: moveclouds 150s linear infinite;
-o-animation: moveclouds 150s linear infinite;
}
.x4 {
left: 400px;
top: -250px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.75;
-webkit-animation: moveclouds 100s linear infinite;
-moz-animation: moveclouds 100s linear infinite;
-o-animation: moveclouds 100s linear infinite;
}
.x5 {
left: -750px;
top: -250px;
-webkit-transform: scale(0.47);
-moz-transform: scale(0.47);
transform: scale(0.47);
opacity: 0.8;
-webkit-animation: moveclouds 110s linear infinite;
-moz-animation: moveclouds 110s linear infinite;
-o-animation: moveclouds 110s linear infinite;
}
#-webkit-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-moz-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-o-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
What I'm trying to achieve:
At 5.30PM (as on local system): transition from #c9dbe9 to #E0DE3F
At 6.30PM : transition from #E0DE3F to #323232
At 5.30AM : transition from #323232 to #E0DE3F
At 7.00AM : transition from #E0DE3F to #c9dbe9
Please check out the demo above, a similar demo would be greatly appreciated, a single transition detecting the system time would be enough, I'll take care of the rest.
Also, is it possible to loop the cloud animation again before all the clouds have floated past the screen? There's a gap where the animation waits till all the clouds have floated past the screen, before starting up again.
Try this
var dt=new Date();
var h=dt.getHours();
var m=dt.getMinutes();
var time=h+':'+m
if(h == 17){
if(m > 30){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #E0DE3F 0%, #fff 100%)'
})
}
}
else if(h > 17){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #E0DE3F 0%, #fff 100%)'
})
}
else if(h == 18){
if(m > 30 ){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #323232 0%, #fff 100%)'
})
}
}
else if(h > 18){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #323232 0%, #fff 100%)'
})
}
else if(h == 5){
if(m >= 30){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #E0DE3F 0%, #fff 100%)'
})
}
}
else if(h > 5 && h < 17){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #E0DE3F 0%, #fff 100%)'
})
}
else if(h == 6){
if(m >= 30){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%)'
})
}
}
else if(h >6 && h < 17){
$('#clouds').css({
background:'-webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%)'
})
}
*{ margin: 0; padding: 0;}
body {
overflow: hidden;
}
#clouds{
padding: 100px 0;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
.cloud {
width: 200px; height: 60px;
background-color: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
.x1 {
left: -250px;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
-webkit-animation: moveclouds 120s linear infinite;
-moz-animation: moveclouds 120s linear infinite;
-o-animation: moveclouds 120s linear infinite;
}
.x2 {
right:70px; top:-100px;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.7;
-webkit-animation: moveclouds 140s linear infinite;
-moz-animation: moveclouds 140s linear infinite;
-o-animation: moveclouds 140s linear infinite;
}
.x3 {
left: -550px; top: -200px;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
opacity: 0.8;
-webkit-animation: moveclouds 150s linear infinite;
-moz-animation: moveclouds 150s linear infinite;
-o-animation: moveclouds 150s linear infinite;
}
.x4 {
left: 400px; top: -250px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.75;
-webkit-animation: moveclouds 100s linear infinite;
-moz-animation: moveclouds 100s linear infinite;
-o-animation: moveclouds 100s linear infinite;
}
.x5 {
left: -750px; top: -250px;
-webkit-transform: scale(0.47);
-moz-transform: scale(0.47);
transform: scale(0.47);
opacity: 0.8;
-webkit-animation: moveclouds 110s linear infinite;
-moz-animation: moveclouds 110s linear infinite;
-o-animation: moveclouds 110s linear infinite;
}
#-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
#-o-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
You can set a standard CSS animation, and then sync it with the clock using animation delay.
The delay that you need to set is equal, in negative, to the amount of time that has elapsed.
Since showing this on a day basis is quite boring, I have set an example that cycles in one minute, so it is using the seconds. To show that it is accurate, I am showing also the current second on the demo
window.onload = function () {
var date = new Date();
var sec = - date.getSeconds();
var ele = document.getElementById ("test");
ele.style.animationDelay = sec + 's';
setInterval ( function () {
var date = new Date();
var ele = document.getElementById ("time");
ele.innerText = date.getSeconds();
}, 1000);
}
#test {
background: radial-gradient(circle at 4% 4%, yellow 30px, transparent 25px),
radial-gradient(circle at 4% 92%, white 30px, transparent 25px),
linear-gradient(to top, black 0%, gray 20%, orange 40%, orange 60%, lightblue 80%, blue 100%);
background-size: 2000% 2000%;
background-repeat: no-repeat;
background-position: 0% 0%;
height: 200px;
width: 300px;
animation: anim 30s infinite alternate;
}
#keyframes anim {
0% {background-position: 0% 100%;}
100% {background-position: 0% 0%;}
}
#time {
width: 200px;
height: 100px;
left: 400px;
position: absolute;
top: 0px;
font-size: 60px;
}
<div id="test"></div>
<div id="time"></div>
The second 0 is midnight, and the second 30 is noon.
And there is the sun and the moon, too ...
hey plz check this responsive menu i want to make the drawer to move right side but i have no idea about css animation can anyone suggest me what to do.
here is fiddle
i try to make the translate3d -240px the drawers move right but navigation is disappear.
header.open,
.content.open
{
-webkit-transform: translate3d(240px,0,0);
-webkit-animation: open .5s ease-in-out;
-moz-transform: translate3d(240px,0,0);
-moz-animation: open .5s ease-in-out;
transform: translate3d(240px,0,0);
animation: open .5s ease-in-out;
}
I needed this as well and made the necessary tweaks and now it works. Some of the changes below but check the fiddle for working code: http://jsfiddle.net/pkxtj9z1/
.burger {
float: right;
right: 10px;
}
nav {
right: 5px;
}
nav li {
text-align: right;
}
header.open,
.content.open
{
-webkit-transform: translate3d(-240px,0,0);
-webkit-animation: open .5s ease-in-out;
-moz-transform: translate3d(-240px,0,0);
-moz-animation: open .5s ease-in-out;
transform: translate3d(-240px,0,0);
animation: open .5s ease-in-out;
}
#-webkit-keyframes open {
0% {-webkit-transform: translate3d(0,0,0);}
70% {-webkit-transform: translate3d(-260px,0,0);}
100% {-webkit-transform: translate3d(-240px,0,0);}
}
#-moz-keyframes open {
0% {-moz-transform: translate3d(0,0,0);}
70% {-moz-transform: translate3d(-260px,0,0);}
100% {-moz-transform: translate3d(-240px,0,0);}
}
#keyframes open {
0% {transform: translate3d(0,0,0);}
70% {transform: translate3d(-260px,0,0);}
100% {transform: translate3d(-240px,0,0);}
}