Run CSS3 Animation Only Once (At Page Loading)

Run CSS3 animation only once (at page loading)

After hours of googling: No, it's not possible without JavaScript. The animation-iteration-count: 1; is internally saved in the animation shothand attribute, which gets resetted and overwritten on :hover. When we blur the <a> and release the :hover the old class reapplies and therefore again resets the animation attribute.

There sadly is no way to save a certain attribute states across element states.

You'll have to use JavaScript.

Play CSS animation only once

Since your ng-show/ng-if is triggered by change of some condition, you can use a boolean to determine wheather the display is initial and set it in the same context.

Then you can use ng-class to add a class initial to your div and move the css-transition properties.

Like this:

HTML:

<div ng-class="{'initial': controller.initial}"></div>

CSS:

div.initial{
  transition: ...
}

JS/Controller:

functionThatSetsShowCondition(){
  controller.initial = true;
}

CSS animation play only once when section is visible on the screen

Are you talking about the float-up animations on scroll? If yes, that can be done using CSS but might require some javascript as well based on your requirements to setup the animations. You can read more about it here.

Alternatively, you can use this as well to get your work done easily! However, since you want the animation to show up only once, you might have to make some changes using javascript.

css3 transition animation on load?

You can run a CSS animation on page load without using any JavaScript; you just have to use CSS3 Keyframes.

Let's Look at an Example...

Here's a demonstration of a navigation menu sliding into place using CSS3 only:

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}

<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>

Animation on initial page load only

Use CSS to animate the opacity of the body tag once.

Firefox will remember that the animation ran already, so when you go back to the cached page it won't run again. Other browsers (Chrome) will re-run the animation. To avoid this, you need to key the animation to an ID or class and have a snippet of JavaScript in the body tag to check a cookie.

if(false == /(^|;)\s?first=1\s?($|;)/i.test(document.cookie)) {
    document.body.id="first";
    document.cookie = "first=1; expire= path=/";
}

#first {
    animation: fadeInOnce 1s 1 ease; 
}
    
@keyframes fadeInOnce { 
    0% { 
        display: none; 
        opacity: 0; 
    } 
    100% { 
        display: block; 
        opacity: 1; 
    } 
}

<div id="first">This is content</div>

Run CSS3 Animation Only Once (At Page Loading)