We Keep Coding

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

I am trying to mimic the CSS animations from a website here: https://stanographer.com/
I want to copy the way the site:
starts by showing a full screen black div sliding away to the right
"loads" the black background (div tags) behind text (as in "Hi, I'm Stanley Sakai"), expanding left to right and
"loads" the text over the black background div, expanding left to right.
Now you might ask, "Why not just inspect the page, look at the classes on the divs and text, then inspect the CSS sheet in the network tab?" And I've tried that. The CSS looks weird. My friend said it is pre-processed by SASS, whatever that means. Anyway, I cannot decipher the code.
I've been to a few different StackOverflow pages (here's one) & over a dozen different pages on Google. I learned about using keyframes but I haven't figured out how to recreate the effect on Stanographer.com. My friend, who owns the website, also provided this example, but I don't get how to apply it to individual divs. He said something about using the z-index but I just don't see it.
I know that to make the page start with a full black screen & then slide out, I have to trigger a class change using JavaScript. I have:
let blackStuff = document.getElementById("blackness");
window.addEventListener("load", () => {
console.log("loaded");
blackStuff.setAttribute("class", "black-box-out");
},
false
);
.black-box {
position: fixed;
float: left;
top: 0;
width: 100%;
height: 100%;
bottom: 0;
background-color: #000;
z-index: 999999;
-webkit-animation: powerslide 0.5s forwards;
-webkit-animation-delay: 2s;
animation: powerslide 0.5s forwards;
animation-delay: 2s;
}
#-webkit-keyframes powerslide {
100% {
left: 0;
}
}
#keyframes powerslide {
100% {
left: 0;
}
}
.black-box-out {
margin-left: 100%;
animation: slide 0.5s forwards;
-webkit-transition: slide 0.5s forwards;
transition: slide 0.5s forwards;
}
<div id="blackness" class="black-box"></div>
But this just makes the "blackness" div disappear instantly on page load. I want it to slide out. Clearly, I don't get how to use CSS animations.
If you are interested in seeing more of what doesn't work, read on. Otherwise, you can skip this section: it only shows my failed trials.
I've learned how to make a CSS animation expand horizontally from 0:
.wrapper {
position: relative;
overflow: hidden;
width: 500px;
height: 50px;
border: 1px solid black;
}
.slide-custom {
width: 500px;
height: 50px;
background: cyan;
position: relative;
-webkit-animation: slideIn 2s forwards;
animation: slideIn 2s forwards;
}
/* moz and webkit keyframes excluded for space */
#keyframes slideIn {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
<div class="wrapper slide-custom">
<h1 class="slide-custom">
<span>MEET ROLY POLY.</span>
<!-- expands horizontally from 0 width to 100% width -->
</h1>
</div>
And I've learned to make text "slide in" from the left, though it starts at 100% width when I want it to start at 0% width:
/* CSS */
.test-slide {
animation-duration: 3s;
animation-name: testSlide;
}
#keyframes testSlide {
from {
margin-left: 0%;
width: 50%;
}
to {
margin-left: 100%;
width: 100%;
}
}
<div class="test-slide">
<h1><span>ABOUT.</span></h1>
<!-- will slide in from the left -->
</div>
There's more -- unfortunately none of it mimics the website I'm trying to copy.

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>
Although the simple animation you wanted can be created using merely CSS, I still suggest you read about how to make animations using JavaScript and the various libraries it has in making animations. This is because once there are many animations and transitions going on, it becomes hard to keep track of animations (especially when you want animations to start after another animation ends). A good library is anime.js (do explore more options before settling on one). Furthermore, notice how the animations only appear upon scrolling down in the website you provided? That's doable only with JS (one such method is using IntersectionObserver API provided by most browsers).

Here you have some CSS3 animations, you trigger that animation when the .entrance-animation gets the .active class.
You'll need an observer to watch when the item gets into view and, when the item is visible, you add the .active class to it.
Hope it helps!
setTimeout(() =>
{
let animate = document.querySelectorAll('.entrance-animation');
animate.forEach(item => item.classList.add('active'));
}
,1000);
.entrance-animation
{
position: relative;
color: blueviolet;
white-space: nowrap;
font-size: 24px;
width: 0;
overflow: hidden;
transition: width 0.5s ease;
}
.entrance-animation::before
{
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
background-color: black;
z-index: 10;
transition: width 0.5s ease;
transition-delay: 0.5s;
}
.entrance-animation.active
{
width: 100%;
}
.entrance-animation.active::before
{
width: 0%;
}
<p class="entrance-animation">
Hello
</p>
<p class = "entrance-animation">
Here we are
</p>

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 how I mean.
CSS transition (on hover)
Demo One
Relevant Code
.wrapper:hover #slide {
transition: 1s;
left: 0;
}
In this case, Im 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 example 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
Hope this helped.

Expand CSS3 animation is not working

I have a very simplistic overlay navigation, see below:
<nav role="navigation" class="navigation">
<img src="img/beer-jug-logo.png" alt="brand logo">
<ul class="navigation-list">
<li>Home</li>
<li>About</li>
<li>Design</li>
<li>Interiors</li>
<li>Contact</li>
</ul>
<a class="close"></a>
</nav>
Now I have added a very simple CSS expand and shrink animation and these animations are toggled using jQuery. The animations code are below:
.navigation.shrinkMenu {
-webkit-animation-name: shrinkMenu;
-o-animation-name: shrinkMenu;
animation-name: shrinkMenu;
-webkit-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.navigation.expandMenu {
-webkit-animation-name: expandMenu;
-o-animation-name: expandMenu;
animation-name: expandMenu;
-webkit-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
#keyframes shrinkMenu {
90% {
opacity: 0;
}
99% {
left: 50%;
top: 50%;
bottom: 50%;
right: 50%;
}
100% {
opacity: 0;
visibility: hidden;
left: 50%;
top: 50%;
bottom: 50%;
right: 50%;
}
}
#keyframes expandMenu {
0% {
left: 50%;
top: 50%;
bottom: 50%;
right: 50%;
}
100% {
left: 0;
top: 0;
bottom: 0;
right: 0;
}
}
The initial styles on the menu are below:
.navigation {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
/*background: rgba(244 ,41, 65,.9);*/
background: rgba(255 ,255, 255,.9);
display: flex;
align-items:center;
justify-content:center;
flex-direction:column;
z-index: 999;
}
The jQuery code to toggle the menu visibility is below:
$('.close').on('click', function() {
$('.navigation').addClass('shrinkMenu');
});
$('.H-menu').on('click', function() {
$('.navigation').addClass('expandMenu');
});
FIDDLE HERE
Now if you see the fiddle or even run the animation in Chrome or FF you'll notice that the shrink animation works just fine, but the expand animation is abrupt, I.E. it just doesn't work. Can anybody please explain why the animation is not working?

Note: This doesn't seem to be consistent problem. The problem happens in Fiddle only when it is loaded for the first time (by giving the URL in the address bar and clicking Go). When any edit is made to the Fiddle and we just "Run" it, the error does not happen. I could not re-create the issue in Stack Snippet either.
There are no problems with your animation code or the CSS. The problem seems to be due to href attribute in the a.H-menu tag. When this attribute is specified and there is no value, it seems like the whole page is getting reloaded on the click of the menu icon and thus you don't get to see animation.
You could do one of the following things:
Set href='#' and use e.preventDefault() within the click event handler (or)
Don't even mention the href attribute in the a.H-menu tag.
Doing either of the above would mean that the page won't be reloaded and hence animation will get displayed.
You could verify what I am saying by visiting the following Fiddles (view the console on first load):
Fiddle with original code - Open the Fiddle and open the Console immediately. Error message indicating that the image (beer-jug-logo.png) could not be loaded would be displayed. Clear this error message, close the menu and click the icon to re-open it. You would notice that the error gets displayed again (indicating that it is getting re-loaded).
Fiddle with href='#' - Do same steps as above and you'd notice the animation working properly and that there is no error message in the console upon clicking the .H-menu icon.
Fiddle with no href - Same steps and you'd notice same result as the second Fiddle.

How to fire a new css animation when the element already has one?

I have this element which already has an animation that fires at some time:
.box {
width: 100%;
height: 87.5%;
background: #DDD;
position: absolute;
top: 12.5%;
left: 0%;
-webkit-animation: load 0.5s ease-out 5s backwards;
animation: load 0.5s ease-out 5s backwards;
}
But at some time, always after that animation has finished I want to fire a new animation on the same element. So I thought that creating a new class and attaching it to the element with JS would work:
.unload{
-webkit-animation: unload 0.5s ease-out 0.5s backwards !important;
animation: unload 0.5s ease-out 0.5s backwards !important;
}
document.querySelector(".box").classList.add('unload');
But it doesn't work. The class gets added but the animation doesn't happen.
Does anyone know why this is happening and how to fix it?

The keyframe's names were slightly different and didn't fit the call. Sorry, it was quite stupid...

Six years down the line and I had the same problem, which somehow I was able to figure out. I might as well just share it.
What helped me was specificity. Instead of applying the modifier class directly to the animated element I applied it to the parent div and used the descendant selector like this:
HTML
<div class="container container--unload"> //this second class can be added later with JS
<div class="box">
//some feature here
</div>
</div>
CSS
.box {
width: 100%;
height: 87.5%;
background: #DDD;
position: absolute;
top: 12.5%;
left: 0%;
animation: load 0.5s ease-out 5s backwards;
}
.container--unload .box{
animation: unload 0.5s ease-out 0.5s backwards;
}
JS
document.querySelector(".container").classList.add("container--unload");
Tested and seems to be working. I left out the keyframes.
Cheers!

CSS/JavaScript slide DIV out and slide DIV in

I am wanting to be able to slide a div out (to the left), while sliding another div in (from the right) at the same time.
My HTML code is like this:
<body>
<div id="content">
<div id="page1">
<!-- Content Area 1 -->
</div>
<div id="page2">
<!-- Content Area 1 -->
</div>
</div>
</body>
Currently I am using
document.getElementById('page1').style.display = "none";
document.getElementById('page2').style.display = "inline";
to switch between the pages, but I would like to have the transition as smooth as possible.
Is there a way I can do this, without jQuery and preferably just in CSS?
If not, how can I do it in jQuery?

Yes you can do it with pure css by using animation keyframes.
HTML
<div id="content">
<div id="page1" class="page">
<!-- Content Area 1 -->
</div>
<div id="page2" class="page">
<!-- Content Area 1 -->
</div>
</div>
CSS
html,body {
height: 100%;
overflow: hidden;
}
#content {
position: relative;
height: 100%;
}
.page {
position: absolute;
top:0;
height: 100%;
width: 100%;
}
#page1 {
background: #d94e4e;
left:-100%;
-webkit-animation: left-to-right 5s linear forwards;
animation: left-to-right 5s linear forwards;
}
#page2 {
background: #60b044;
left:0;
-webkit-animation: right-to-left 5s linear forwards;
animation: right-to-left 5s linear forwards;
}
#-webkit-keyframes left-to-right{
from{left:-100%}
to{left:0}
}
#-webkit-keyframes right-to-left{
from{left:0}
to{left:100%}
}
#keyframes left-to-right{
from{left:-100%}
to{left:0}
}
#keyframes right-to-left{
from{left:0}
to{left:100%}
}
However there is one huge limitation to this method. CSS can't handle any real events. So if you want this animation to appear when a button is clicked or something, you'll have to use JavaScript.
Demo jsFiddle
Edited
Now the left one enters and the right one exits at the same time.
UPDATE
The same example using translate3d => jsFiddle

here's an (almost) full CSS solution:
If you can be more specific about what you want I can happily tweak or guide you through the code to help you.
It relies on using translate3d:
transform: translate3d(-200px, 0, 0);
DEMO

using jQuery
http://jsfiddle.net/5EsQk/
<div id="content">
<div id="page1" style="width: 100px; height: 100px; color: white; background-color:silver; float: left; margin-left: -90px;">
Content Area 1
</div>
<div id="page2" style="width: 100px; height: 100px; color: white; background-color:silver; float: right; margin-right: -90px;">
Content Area 1
</div>
</div>
$(document).ready(function() {
$('#page1').animate({
marginLeft: "+=90"
}, 5000);
$('#page2').animate({
marginRight: "+=90"
}, 5000);
});
edited fiddle => http://jsfiddle.net/5EsQk/1/

Very much possible without jQuery, using only CSS and CSS transitions.
You can set up your CSS so that if <div id="content"> has no class .showPage2, it shows page 1. If it does have .showPage2, it shows page 2.
The transition is then only triggered by toggling the class using (native) Javascript. The animation is handled by CSS transitions. This means that if by any change the browser does not support CSS3 transitions, the user will still see the correct page; only not with the fancy transition. CSS3 transitions are generally very smooth.
This is what the CSS would look like:
#content
{
position: relative;
overflow: hidden;
}
#content #page1
{
position: absolute;
left: 0%;
width: 100%;
height: 100%;
transition: left .5s ease-out;
-webkit-transition: left .5s ease-out;
}
#content #page2
{
position: absolute;
left: 100%;
width: 100%;
height: 100%;
transition: left .5s ease-out;
-webkit-transition: left .5s ease-out;
}
#content.showPage2 #page1
{
left: -100%;
}
#content.showPage2 #page2
{
left: 0%;
}
And the Javascript could look something like this:
function showPage1()
{
document.getElementById("content").setAttribute("class", "")
}
function showPage2()
{
document.getElementById("content").setAttribute("class", "showPage2")
}
I hope this handles it in a way that fits your needs.

Recreating a text animation (source within)

I would like to recreate the text animation seen in this screen video I did of this website theme: http://themeforest.net/item/js-responsive-theme/full_screen_preview/7630276
Here is the video to show you the animation:
https://drive.google.com/file/d/0B3HFm_t_vjVpVUNiWVRVdW14aWs/edit?usp=sharing
I am unsure of where to begin and cannot find anything like it through my search so far, I am open to anything to create this such as jQuery. Thank you for any help!

I'd do this with two absolute positioned texts, one gray (or semi transparent) second one, on top set to overflow:hidden. Then I'd just animate the width of the second container.
How do You like the idea? :)
edit:
little tweaking, but idea the same - fiddle for You: http://jsfiddle.net/Lr4PQ/
quite important CSS rule:
white-space: nowrap;
to prevent breaking lines when width of text node is smaller than text's.
edit 2:
Of course, idea behind lets You to achieve the result using pure CSS, jQuery's role is just animating width.
HTML:
<div class="container">
<div class="text upper">You`re the boss</div>
<div class="text ">You`re the boss</div>
</div>
CSS:
body {
background:#000;
}
.container {
position:absolute;
left:30%;
top:20%;
width:auto;
/*position container as You wish*/
}
.text {
text-transform:uppercase;
font-family:sans-serif;
color:#FFF;
opacity:.2;
white-space: nowrap;
font-size:30px;
}
.text.upper {
position:absolute;
opacity:1;
overflow:hidden;
width:0%;
}
jQuery:
$('.text.upper').animate({width:'100%'},3000).animate({width:'0%'},3000);

The animation is achieved in pure CSS3:
jsBin demo
HTML:
<div class="modal">
<h1 data-content="YOUR BEAUTIFUL NAME">YOUR BEAUTIFUL NAME</h1>
</div>
CSS:
.modal h1 {
color: #626161;
font-size: 30px;
left: 50%;
margin-left: -125px;
margin-top: -15px;
position: absolute;
text-align: center;
top: 50%;
}
.modal h1:before {
animation: 5s ease 0s normal none 1 loading;
-o-animation: 5s ease 0s normal none 1 loading;
-ms-animation: 5s ease 0s normal none 1 loading;
-moz-animation: 5s ease 0s normal none 1 loading;
-webkit-animation: 5s ease 0s normal none 1 loading;
color: #E2E2E2;
content: attr(data-content);
max-width: 100%;
overflow: hidden;
position: absolute;
white-space:nowrap;
}
#keyframes loading {
0% { max-width: 0%; }
}
#-o-keyframes loading {
0% { max-width: 0%; }
}
#-ms-keyframes loading {
0% { max-width: 0%; }
}
#-moz-keyframes loading {
0% { max-width: 0%; }
}
#-webkit-keyframes loading {
0% { max-width: 0%; }
}
One of the reason they used a single h1 instead of overlaying two h1 elements and animating the second's one width is simply cause for a better SEO a page should contain only one h1 element. Also using content: attr(data-content); is quite fun so...