We Keep Coding

CSS keyframe animation not working on floated element

Hi I am building a simple slider to present a project.
The slider is based on swipe.js.org. I am doing everything as I should, except one thing: While every slide div contains only one image, one slide contains 2 overlapping images #img7-1 & #img7-2. I am overlaying those two images to fade the opacity of the upper image.
Below is my css. The order of elements represents the structure of the elements in the DOM.
I also have a link to the presentation at the end if you just want to look at the page source.
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
.swipe-wrap > div img {
display: block;
width: 100vw;
height: 100vh;
object-fit: contain;
}
#img7-1{
position: relative;
z-index: 1;
}
#img7-2{
position: absolute;
z-index: 2;
animation: fade 1.5 ease-in-out 1.5s alternate infinite running;
}
#keyframes fade{
from {opacity: 0%;}
to {opacity: 100%;}
}
You can view the presentation here, all the code, styles & js (except cdn library) is on that html page.
If anyone knows this, please help me - coding is not my best skill.
Thanks everyone.
Edit:
div elements affected in dom:
<div class="swipe-wrap">
<div>
<img id="img7-1" src="/images/rivian/Rivian_Storyboards-7-1.jpg">
<img id="img7-2" src="/images/rivian/Rivian_Storyboards-7-2.jpg">
</div>
</div>

I ran your code through the CSS validator and it came back saying your shorthand notation for animation was incorrect so this fixed that problem. My next question is what is #img7-2 referring to in your html? I don't see what this animation is being used on in your source code.
EDITED:
Once you add top:0 to the img7-2 you can now see the effect happening, before the image was placed outside the browser window. You can change the timing however you'd like.
#img7-2 {
position: absolute;
z-index: 2;
/*animation: overlay 6s ease-in-out infinite running;*/
animation-name: fade;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-delay: 1.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-play-state: running;
top:0
}

How to control the transform distance with pure JavaScript

I made this
http://codepen.io/adamchenwei/pen/dOvJNX
and I try to apply a certain way of moving for a dom so it move for a fixed distance and stop, instead of animate and move through the whole width of the dom. However, I don't really want to fix the distance inside the css keyframe because I need to detect that distance dynamically, since my div that got animated ideally will change the width dynamically as well since that is not going always be 100% or any specific px fixed.
Is there way I can do that in JavaScript instead and not let css to take charge in this transform distance part?
Cross browser capacity will be great.
SCSS
.myItem {
height: 100px;
width: 501px;
background-color: beige;
animation: to-left-transition 300ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
#keyframes to-left-transition {
0% {
transform: translate(0);
}
100% {
transform: translate(100%);
}
}
HTML
<div class="myItem">
stuff here
</div>

Found out a better way. Soooooo much easier!
I should have been using transition instead of animation. As that give me the flexibility to adjust the animation accordingly.
Hope it helps someone else to save couple hours!
http://codepen.io/adamchenwei/pen/xRqYNj
HTML
<div class="myItem">
stuff here
</div>
CSS
.myItem {
position: absolute;
height: 100px;
width: 501px;
background-color: beige;
transition: transform 1s;
}
JS
setTimeout(function() {
document.getElementsByClassName('myItem')[0].style.transform="translateX(400px)";
console.log('ran');
}, 3000);

EDIT
Below is a method sugguested by Dennis Traub
setTimeout(function() {
console.log('ran');
$("head").append('<style type="text/css"></style>');
var new_stylesheet = $("head").children(':last');
new_stylesheet.html('.myItem{animation: to-left-transition 600ms;}');
}, 3000);
.myItem {
position: absolute;
height: 100px;
width: 501px;
background-color: beige;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
#keyframes to-left-transition {
0% {
transform: translate(0);
}
100% {
transform: translate(100%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item" class="myItem">
stuff here
</div>
Answer Before EDIT
Here is a good reference for something similar to what i think you are trying to accomplish.
Based on your dynamic input you could have a function that controls how far the div transitions. Still use your code for transition in the css, but compute how far you want in the jquery or JavaScript. Then call the css transition for how far or long you want to transition.
var boxOne = document.getElementsByClassName('box')[0],
$boxTwo = $('.box:eq(1)');
document.getElementsByClassName('toggleButton')[0].onclick = function() {
if(this.innerHTML === 'Play')
{
this.innerHTML = 'Pause';
boxOne.classList.add('horizTranslate');
} else {
this.innerHTML = 'Play';
var computedStyle = window.getComputedStyle(boxOne),
marginLeft = computedStyle.getPropertyValue('margin-left');
boxOne.style.marginLeft = marginLeft;
boxOne.classList.remove('horizTranslate');
}
}
$('.toggleButton:eq(1)').on('click', function() {
if($(this).html() === 'Play')
{
$(this).html('Pause');
$boxTwo.addClass('horizTranslate');
} else {
$(this).html('Play');
var computedStyle = $boxTwo.css('margin-left');
$boxTwo.removeClass('horizTranslate');
$boxTwo.css('margin-left', computedStyle);
}
});
.box {
margin: 30px;
height: 50px;
width: 50px;
background-color: blue;
}
.box.horizTranslate {
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
margin-left: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Pure Javascript</h3>
<div class='box'></div>
<button class='toggleButton' value='play'>Play</button>
<h3>jQuery</h3>
<div class='box'></div>
<button class='toggleButton' value='play'>Play</button>
This code was written by Zach Saucier on codepen
This is a good reference for manipulating css with JS: https://css-tricks.com/controlling-css-animations-transitions-javascript/

Load images before showing a div

I have never asked anything on this forum before so I'll try to be as clear as possible.
I am trying to show a loading screen while the contents of a div is loading in my website.
I tried to use jQuery .load() function but it seems not to work.
It works when i use the .ready() function but i want to load all the images before to show the div.
So the div is hidden (style="display:none;")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading"> // loading screen </div>
<div id="divtoshow" style="display:none;"> //images and text </div>
<script>
$("#divtoshow").load(function(){
$("#loading").fadeOut(200);
$("#divtoshow").fadeIn(200);
});
//if i replace load with ready it works
</script>

You want to do stuff specifically when all the images on the page have loaded.Try this custom jQuery event...
/**
* Exposes an event called "imagesLoaded" which is triggered
* when all images on the page have fully loaded.
*/
(function($) {
var loadImages = new Promise(function(done) {
var loading = $("img").length;
$("img").each(function() {
$("<img/>")
.on('load', function() {
loading--;
if (!loading) done();
})
.on('error', function() {
loading--;
if (!loading) done();
})
.attr("src", $(this).attr("src"))
});
});
loadImages.then(function() {
$(document).trigger({
type: "imagesLoaded"
});
});
})(jQuery);
It works by copying each image (in the event they are already loaded, this is necessary to catch the load event) and listening for the load on the copy. I got the idea from here.
Here is a fiddle.

If you want to use the .load() method you need to bind it to the img element not to the container:
$("#divtoshow img").on('load', function(){
$("#loading").fadeOut(200, function(){
$("#divtoshow").fadeIn(200)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading">Loading</div>
<div id="divtoshow" style="display:none;"><img src="http://lorempixel.com/350/150"><h1>My Text</h1></div>

If you want the page contents to load before transitioning to display the main page div then you want to us the fundamental document.ready pattern:
<div id="loading"> // loading screen </div>
<div id="divtoshow" style="display:none;"> //images and text
<img src='...a path to a large file....'/>
</div>
and then
<script>
$(document).ready(function() {
$("#loading").fadeOut(200);
$("#divtoshow").fadeIn(200);
});
</script>
In general, if you are doing any element (DOM) manipulation using JQuery and you do NOT havethe document.ready() pattern in place then you should ask yourself if you should maybe add it in. Particularly if you develop with local assets because when you shift to production and network latency has an impact you may find timing issues cause odd bugs in code that worked perfectly when all assets were local.

CSS
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
HTML
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
JAVASCRIPT
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide();
});
</script>

The load() method was deprecated in jQuery version 1.8 and removed in version 3.0. you can use window on.load function OR you can also follow the DaniP answer. Here is an example with preloader.
One more problem you are trying to load the #divtoshow which is already display none. So you need to load something that inside on that div
$(window).on('load', function() {
$("#loading").fadeOut();
$("#divtoshow").fadeIn(300);
});
#divtoshow {
display: none;
text-align: center;
}
#loading{
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
.img-responsive{
width:100%;
height:auto;
display:block;
margin:0 auto;
}
<div id="loading"></div>
<div id="divtoshow" class="animate-bottom">
<img src="http://orig10.deviantart.net/f6bf/f/2007/054/1/9/website_banner_landscape_by_kandiart.jpg" class="img-responsive" alt="banner "/>
<h2> loaded Title!</h2>
<p>Some text and Image in my newly loaded page..</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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.

Slide floated divs after hiding an element

I have a row of 4 divs that are floated left. On click, the div disappears and its siblings move to the left and take up its position. However, I'm struggling with smoothing this animation since the remaining 'divs' just jump to their new position instead of sliding over
http://jsfiddle.net/G9x8V/
Is there any way to smooth out the transition, preferably without using specific values, ie: margin-left: x pixels;? Also, is it possible to do this with css transitions?

You can switch fadeOut() with hide()
Here is the updated fiddle
$(function(){
$('.box').on('click', function(){
$(this).hide(1000);
})
});
EDIT
One of the directions is to wrap boxes into invisible divs that will hide after the boxes fade out. Here is the updated fidle
HTML
<div class="container">
<div class="outer-box">
<div class="box">1</div>
</div>
<div class="outer-box">
<div class="box">2</div>
</div>
<div class="outer-box">
<div class="box">3</div>
</div>
<div class="outer-box">
<div class="box">4</div>
</div>
</div>
CSS
.container {
width: 600px;
}
.box {
width: 100%;
height: 120px;
background: red;
float: left;
}
.outer-box {
width: 20%;
height: 120px;
margin-left: 2.5%;
float: left;
}
jQuery
$(function(){
$('.box').on('click', function(){
$(this).fadeOut(1000, function(){
$(this).parents('.outer-box').hide(1000);
});
});
});

I'd go with Bojana's answer, but I'll give you another option, as I worked a little on it(it's not done, implementation isn't as easy as bojana's):
http://jsfiddle.net/G9x8V/4/
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {margin-left: 18%;}
25% {margin-left: 12%;}
50% {margin-left: 6%;}
100% {margin-left: 0%;}
}
And then you'd have to update the javascript so it occured on click, not on page load, and you might want to put in more points on that animation and switch to px.

Is this what you are looking for? Or do you actually want the blocks to slide along?
CSS3 Ease
-webkit-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-ms-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;
JSFIDDLE
jQuery
$(function(){
$('.box').on('click', function(){
$(this).fadeOut(function() {
$(this).next().animate({'left': '0px'}, 1000).next().animate({'left': '27.5%'}, 1000).next().animate({'left': '50%'}, 1000);
});
})
});
JSFIDDLE jQuery