On the homepage, the CSS that is initially loaded on the JSFiddle is present. My goal is to have the inner pages transition to their new CSS class only when visited after the homepage.
<div class="container">
<div>
Thank you for your assistance!
</div>
</div>
<style>
.container {
padding: 100px 0;
background: #ccc;
text-align: center;
}
.container div {
background: #eaeaea;
width: 200px;
height: 200px;
margin:0 auto;
text-indent: -9999px;
}
.container.inner,
.container.inner div {
transition: all 0.75s ease-in;
}
.container.inner {
padding: 10px 0;
}
.container.inner div {
width: 100px;
height: 100px;
}
</style>
<script>
jQuery( document ).ready(function() {
setTimeout(function() {
if ( jQuery(".home").length == 0 ) {
jQuery('.container').addClass('inner');
}
}, 500 );
});
</script>
To achieve this, I believe using a cookie or two would be necessary to determine if the previous page was the homepage and to apply the CSS without delay or animation if it was an inner page.