Stop CSS Transition from Firing on Page Load

Stop CSS transition from firing on page load

@Shmiddty comments on this question left me thinking, so I have been playing around with the code and found a solution.

The problem lies on the header declarations. By inverting the order of the CSS and JS external file calls - i.e. putting the CSS before the JS - the color transitions stop firing on page load:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/main.css" rel="stylesheet" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="js/main.js"></script>
</head>

My guess is that the JS load was delaying the load of the CSS to after the DOM was ready. By that time (as @Shmiddty suggested) the text had already been assigned the default browser color and was then using my CSS transition declaration to fade into its styled color.

** I'm still not sure this is the most appropriate way to do it, but it works. If anyone has a better solution please feel free to add or edit.

Prevent CSS3 animation from firing after page load

You could simplify what you have a bit.

Working Example

$('#btnLogin').click(function() {  $('.panel').toggleClass('active');});

.panel {  background-color: red;  height: 200px;  opacity: 0;  width: 200px;  transition: 2s;}.panel.active {  opacity: 1;  transition: 2s;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="body">  <div class="panel"></div></div><button id="btnLogin">Login</button>

How to prevent a CSS keyframe animation from running on page load?

Solution 1 - Add down animation on first hover

Probably the best option is to not put the down animation on until the user has hovered over the container for the first time.

This involves listening to the mouseover event then adding a class with the animation at that point, and removing the event listener. The main (potential) downside of this is it relies on Javascript.

;(function(){    var c = document.getElementById('container');    function addAnim() {        c.classList.add('animated')        // remove the listener, no longer needed        c.removeEventListener('mouseover', addAnim);    };
    // listen to mouseover for the container    c.addEventListener('mouseover', addAnim);})();

#container {    position:relative;    width:100px;    height:100px;    border-style:inset;}#content {    position:absolute;    top:100px;    width:100%;    height:100%;    background-color:lightgreen;    opacity:0;}
/* This gets added on first mouseover */#container.animated #content {    -webkit-animation:animDown 1s ease;}
#container:hover #content {    -webkit-animation:animUp 1s ease;    animation-fill-mode:forwards;    -webkit-animation-fill-mode:forwards;}
@-webkit-keyframes animUp {    0% {        -webkit-transform:translateY(0);        opacity:0;    }    100% {        -webkit-transform:translateY(-100%);        opacity:1;    }}@-webkit-keyframes animDown {    0% {        -webkit-transform:translateY(-100%);        opacity:1;    }    100% {        -webkit-transform:translateY(0);        opacity:0;    }}

<div id="container">    <div id="content"></div></div>

Stop CSS Transition from Firing on Page Load