Css 3 Slide-In from Left Transition

CSS 3 slide-in from left transition

You can use CSS3 transitions or maybe CSS3 animations to slide in an element.

For browser support: http://caniuse.com/

I made two quick examples just to show you what I mean.

CSS transition (on hover)

Demo One

Relevant Code

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}

In this case, I'm just transitioning the position from left: -100px; to 0; with a 1s. duration. It's also possible to move the element using transform: translate();

CSS animation

Demo Two

#slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

Same principle as above (Demo One), but the animation starts automatically after 2s, and in this case, I've set animation-fill-mode to forwards, which will persist the end state, keeping the div visible when the animation ends.

Like I said, two quick examples to show you how it could be done.

EDIT:
For details regarding CSS Animations and Transitions see:

Animations

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

Transitions

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Slide in from left CSS animation

Try using keyframes.

div {  width: 50px;  height: 40px;  background: blue;  position: relative;  left: 500px;  -webkit-animation: slideIn 2s forwards;  -moz-animation: slideIn 2s forwards;  animation: slideIn 2s forwards;}@-webkit-keyframes slideIn {  0% {    transform: translateX(-900px);  }  100% {    transform: translateX(0);  }}@-moz-keyframes slideIn {  0% {    transform: translateX(-900px);  }  100% {    transform: translateX(0);  }}@keyframes slideIn {  0% {    transform: translateX(-900px);  }  100% {    transform: translateX(0);  }}

<div></div>

How to build a CSS animation that slides in, revealing a text/div after it finishes sliding?

Explanation

There are multiple ways to achieve what you want actually. I did not opt to animate width. The first few frames of the animation will be not as expected.

So instead, we can use clip-path. What clip-path basically does is masking. You can "crop" a div such that only a part of it is visible. We will utilise clip-path and ::before or ::after pseudo-element (either is fine) to create this animation. What we need to do:

Create the pseudo-element and position it such that it covers (is on top) the whole animatable element (position: absolute)
Set the pseudo-element's background to black
Using clip-path, mask the animatable element to display no parts of the element (this will also cause the pseudo-element to not be displayed as it is part of the element). The direction of the clipping is important. The direction here is from the right side to the left side.
Using animation and @keyframes, unmask the previously masked div. This will reveal it slowly from the left side to the right side (because initially, we masked it from the right to left; upon unmasking, the reverse direction happens)
Upon unmasking the element, the pseudo-element will be on top of the text we want to display
After a short while later, mask the pseudo-element (not the whole element) from the right direction to the left direction, again using clip-path so that the text seems revealed slowly

It works! However, I recommend reading about clip-path. Also, one really handy clip-path CSS generator I really like to use is this (if you want to clip from the right to left, you should drag the points from the right to left). I also highly recommend reading about CSS positioning (a staple in good CSS animations). You needn't be using z-index: 9999; you generally want to keep track of the z-index you use.

Solution

Here's a working solution using the described method. Try running it.

* {  box-sizing: border-box;  margin: 0;  padding: 0;  font-family: Helvetica;}
body,html {  width: 100%;  height: 100%;}
#wrapper {  background: #555555;  width: 100%;  height: 100%;  color: white;  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;}
#wrapper * {  margin: 5px;}
.heading {  font-size: 3em;  padding: 10px 5px;}
.caption {  font-size: 1em;  padding: 5px;  font-family: Courier;}
.animatable {  position: relative;  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);  animation: .75s cubic-bezier(1,-0.01,.12,.8) 1s 1 reveal forwards;}
.animatable::after {  content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: #20262b;  padding: inherit;  animation: .75s cubic-bezier(1,-0.01,.12,.8) 1.75s 1 hideBlack forwards;}
@keyframes reveal {  from { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); }  to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }}
@keyframes hideBlack {  from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }  to { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }}

<div id="wrapper">  <div class="heading animatable">Hi, I am Richard!</div>  <div class="caption animatable">I am a person.</div></div>

CSS3 animation Slide div form right to left Onclick of button

$('#showFilePanel').click(function(event) {  if ($('.notification-container').hasClass('dismiss')) {    $('.notification-container').removeClass('dismiss').addClass('selected').show();  }  event.preventDefault();});
$('#closeFilePanel').click(function(event) {  if ($('.notification-container').hasClass('selected')) {    $('.notification-container').removeClass('selected').addClass('dismiss');  }  event.preventDefault();});

html,body {  overflow: hidden;  max-width: 100%}
.notification-container {  position: absolute;  top: 0;  right: 0;  width: 300px;  display: none;  height: 100%;  overflow: hidden;  background: #107b10;  z-index: 999;  transform: translateX(100%);  -webkit-transform: translateX(100%);}
.selected {  animation: slide-in 0.5s forwards;  -webkit-animation: slide-in 0.5s forwards;}
.dismiss {  animation: slide-out 0.5s forwards;  -webkit-animation: slide-out 0.5s forwards;}
@keyframes slide-in {  0% {    -webkit-transform: translateX(100%);  }  100% {    -webkit-transform: translateX(0%);  }}
@-webkit-keyframes slide-in {  0% {    transform: translateX(100%);  }  100% {    transform: translateX(0%);  }}
@keyframes slide-out {  0% {    transform: translateX(0%);  }  100% {    transform: translateX(100%);  }}
@-webkit-keyframes slide-out {  0% {    -webkit-transform: translateX(0%);  }  100% {    -webkit-transform: translateX(100%);  }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notification-container dismiss"></div>
<a id="showFilePanel">Open</a><a id="closeFilePanel">Close</a>

CSS slide in from left animation

Here is a solution for you.
https://jsfiddle.net/smaefwrp/2/

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        html,
        body,
        img {
            position: absolute;
            top:0;
            left: 0;
            margin: 0;
            padding: 0;
            height: 100%;
            overflow-x: hidden;
        }

        #currentImage {
            height: 100%;
            width: 1920px;
        }
        .translateOrigin {
            transition: none;
            transform: translate3d(-100%, 0, 0) !important;
        }

        .translateLeft {
            transition: transform 3s;
            transform: translate3d(100%, 0, 0) !important;
        }

        .translateIn {
            transition: transform 3s;
            transform: translate3d(0, 0, 0) !important;
        }
    </style>
</head>
<body>
<div id="currentImage">
</div>
<div id="buttons">
</div>
<script type="text/javascript">
    var images = [
        'http://i.imgur.com/ByyUANz.png',
        'http://i.imgur.com/S5FfOOB.png',
        'http://i.imgur.com/EuefPdv.png',
        'http://i.imgur.com/Ucvm4pJ.png',
        'http://i.imgur.com/pK5WBHN.png',
        'http://i.imgur.com/nuOLVpy.png'
    ];
    var imageEle = [];
    var currImage = 0;
    var holder = document.getElementById("currentImage");

    function imagesPreload() {
        for (var i = 0; i < images.length; i++) {
            var img = new Image();
            img.src = images[i];
            img.className = "translateOrigin";
            holder.appendChild(img);
            imageEle.push(img);
        }
    }

    imagesPreload();

    document.onkeydown = function(event){
        if(event.keyCode === 13) {
            nextPicture();
        }
    };

    function slideShow(startAt) {
        var holder = document.getElementById("currentImage");
        imageEle[currImage].className = "translateIn";
        nextPicture();
    }

    function nextPicture() {
        setTimeout(function () {
            var img = imageEle[currImage];
            img.addEventListener("transitionend", transitionEnd, false);
            img.className = "translateLeft";

            if (currImage == 5) {
                currImage = 0;
            } else {
                currImage++;
            }
            imageEle[currImage].className = "translateIn";

            /* Reset the image to original position */
            function transitionEnd() {
                img.className = "translateOrigin";
                img.removeEventListener("transitionend", transitionEnd, false);
                nextPicture();
            }
        }, 5000)
    }
    slideShow(currImage);

</script>
</body>
</html>

Transition slide to the left

From what I understand, you have a 'not really working' animation when clicking on Previous or Next button. The rendering effect is a jump in the animation... right?

You main problem is a conflict beetween CSS animation & JQUERY animation

It seems you want to rule all by JS (with jQuery) because you need to move the last or first image of your slideshow before or after the animation. The used property for animation is left, which is animated or simply set.

So far, so good.... BUT, you have side effects because this left property is also animated with CSS (3 second duration). Each time you are touching left property with JS, it lasts 3 second, so all your JS concept / animation is ruined.

You just need to

Comment the CSS animation for your ul element
Increase you animation duration from 100ms to 2s for instance

Keep in mind you should not mix CSS animation and JQUERY animation on same properties unless you really know what you are doing

Something that works for me with these 2 updates
https://jsfiddle.net/piiantom/a79b2gn4/11/

PS: Beware of your comments which are reversed compared to the applied dedicated code on Prev / Next buttons

slide in and out transition for sliding left menu

You will also need to define the CSS properties that will be animated for that transition. Google uses the transform property in that instance with a translateX value. You will also need a little JavaScript to handle adding and removing the necessary class that gives the transition the new property values or removes them in the case of removing the class. In this case its the open class. Breaking their exact code down to a much simpler form you are left with:

Fiddle: https://jsfiddle.net/aavf64s8/

HTML:

<header>
    <nav class="home" id="menu">
        <a class="nav-trigger" href="#">menu</a>
    </nav>
    <nav id="nav-content">
        <div class="nav-background">hello</div>
    </nav>
</header>

CSS:

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 15
}

header #menu {
    display: block;
    height: 58px;
    padding: 0 1.95em;
}

header #menu a {
    position: relative;
    z-index: 3;
}

header #nav-content .nav-background {
    background: #fff;
    height: 100%;
    left: -330px;
    position: fixed;
    top: 0;
    transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
    -webkit-transform: translateX(-110%);
    -ms-transform: translateX(-110%);
    transform: translateX(-110%);
    width: 100%
}

header.open #nav-content .nav-background {
    -webkit-transform: translateX(330px);
    -ms-transform: translateX(330px);
    transform: translateX(330px)
}

JavaScript:

var menu = document.getElementById('menu');
menu.addEventListener('click',
    function () {
        var header = document.getElementsByTagName('header')[0];
        header.classList.toggle('open');
    }
);

You can now pretty this up with some nicer styling but this is generally what they are doing on that page.

EDIT

To add the overlay google does this (they don't actually animate it in anyway):

Add this HTML:

<div id="curtain"></div>

Add this CSS:

#curtain {
    background-color: #fff;
    height: 1px;
    position: fixed;
    top: 0;
    width: 1px;
    z-index: -1
}

#curtain.menu-opened {
    background-color: rgba(0, 0, 0, .4);
    height: 100%;
    width: 100%;
    z-index: 1
}

Updated JS:

var menu = document.getElementById('menu');
menu.addEventListener('click',
    function() {
        var header = document.getElementsByTagName('header')[0];
        header.classList.toggle('open');
        var curtain = document.getElementById('curtain');
        curtain.classList.toggle('menu-opened');
    }
);

Fiddle: https://jsfiddle.net/aavf64s8/2/

CSS animations, slide in on 'block' and out on 'none'

In your case. It's easier to use transition than animation. This is how it works.

Everytime the button is click. It changes the value of the left property.

<button id="in-button">
Make Div slide in
</button>

<button id="out-button">
Make Div slide out?
</button>

<br>
<br>

<div id="text-container">
  This is some text in a div.
</div>

CSS

#text-container{
  height: 30px;
  width:300px;
  color: white;
  background-color: blue;
  float:left;
  position: relative;
  left: -400px;
  transition: all 0.3s linear
}

#in-button, #out-button{
  float:left;
}

var tC = document.getElementById('text-container');

document.getElementById("in-button").onclick = function(){
    tC.style.left = '0';
}

document.getElementById("out-button").onclick = function(){
    tC.style.left = '-400px';
}

Working fiddle: https://jsfiddle.net/qjwqL236/1/

Css 3 Slide-In from Left Transition