css3 transition animation on load?

user_148496 0
Viewed 550964
css-animations css-transitions webkit css
13 Answers

CSS only with a delay of 3s

a few points to take here:

  • multiple animations in one call
  • we create a wait animation that just delays the actual one (the second one in our case).

Code:

header {
    animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}

@keyframes wait {
    from { transform: translateY(20px); }
    to { transform: translateY(20px); }
}

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
user_3649510

add this to your css for fade in animation

body{animation: 2s ease-out 0s 1 FadeIn;}
@keyframes FadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
}

increase the ease-out time if you want it to load slower

user_157614680

Even simplier solution (still with [one line inline] javascript):

Use this as the body tag: Note that body. or this. did not work for me. Only the long ; querySelector allow the use of classList.remove (Linux Chromium)

<body class="onload" onload="document.querySelector('body').classList.remove('onload')">

and add this line on top of your other css rules.

body.onload *{ transform: none !important; }

Take note that this can apply to opacity (as requested by OP [other posters] ) simply by using opacity as a transition trigger instead. (might even work on any other css ruling in the same fashion and you can use multiple class for explicity delay between triggering)

The logic is the same. Enforce no transform (with :none !importanton all child element of body.onloadand once the document is loaded remove the class to trigger all transition on all elements as specified in your css.

FIRST ANSWER BELOW (SEE EDIT ABOVE FOR SHORTER ANSWER)

Here is a reverse solution:

  1. Make your html layout and set the css accordingly to your final result (with all the transformation you want).
  2. Set the transition property to your liking
  3. add a class (eg: waitload) to the elements you want to transform AFTER load. The CSS keyword !important is the key word here.
  4. Once the document is loaded, use JS to remove the class from the elements to to start transformation (and remove the transition: none override).

Works with multiple transition on multiple elements. Did not try cross-browser compatibility.

div {
  width: fit-content;
}

#rotated {
  transform: rotate(-50deg)/* any other transformation */
  ;
  transition: 6s;
}

#translated {
  transform: translate(90px)/* any other transformation */
  ;
  transition: 6s;
}

.waitload {
  transform: none !important;
}
<div id='rotated' class='waitload'>
  rotate after load
</div>
<div id='translated' class='waitload'>
  trasnlate after load
</div>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', init);

  function init() {
    [...document.querySelectorAll('.waitload')]
    .map(e => e.classList.remove('waitload'));
  }
</script>

user_49505300

If anyone else had problems doing two transitions at once, here's what I did. I needed text to come from top to bottom on page load.

HTML 

<body class="existing-class-name" onload="document.body.classList.add('loaded')">

HTML 

<div class="image-wrapper">
    <img src="db-image.jpg" alt="db-image-name">
    <span class="text-over-image">DB text</span>
</div>

CSS 

.text-over-image {
    position: absolute;
    background-color: rgba(110, 186, 115, 0.8);
    color: #eee;
    left: 0;
    width: 100%;
    padding: 10px;
    opacity: 0;
    bottom: 100%;
    -webkit-transition: opacity 2s, bottom 2s;
    -moz-transition: opacity 2s, bottom 2s;
    -o-transition: opacity 2s, bottom 2s;
    transition: opacity 2s, bottom 2s;
}

body.loaded .text-over-image {
    bottom: 0;
    opacity: 1;
}

Don't know why I kept trying to use 2 transition declarations in 1 selector and (not really) thinking it would use both.

user_95834800

You could use custom css classes (className) instead of the css tag too. No need for an external package.

import React, { useState, useEffect } from 'react';
import { css } from '@emotion/css'

const Hello = (props) => {
    const [loaded, setLoaded] = useState(false);

    useEffect(() => {
        // For load
        setTimeout(function () {
            setLoaded(true);
        }, 50); // Browser needs some time to change to unload state/style

        // For unload
        return () => {
            setLoaded(false);
        };
    }, [props.someTrigger]); // Set your trigger

    return (
        <div
            css={[
                css`
                    opacity: 0;
                    transition: opacity 0s;
                `,
                loaded &&
                    css`
                        transition: opacity 2s;
                        opacity: 1;
                    `,
            ]}
        >
            hello
        </div>
    );
};
user_21925010
Related