Css3 Animate: How to Have the Object Not Revert to Its Initial Position After Animation Has Run

CSS3 Animate: How to have the object not revert to its initial position after animation has run?

Oh, that's easy, simply set all the css rules to the finishing result.
Example

CSS Animate an object and retain its new position

You can use the animation-fill-mode property.

The animation-fill-mode property specifies a style for the element
when the animation is not playing (when it is finished, or when it has
a delay).

By default, CSS animations do not affect the element until the first
keyframe is "played", and then stops once the last keyframe has
completed. The animation-fill-mode property can override this
behavior.

-CSS3 animation-fill-mode Property

-webkit-animation-fill-mode: forwards make the movement permanent, once the animation has run its course.

.container {

  background-color: blue;

  height: 200px;

  width: 200px;

  position: relative;

  -webkit-animation-name: animate;

  -webkit-animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

}

@-webkit-keyframes animate {

  0% {

    -webkit-transform: translate(0, 0);

  }

  100% {

    -webkit-transform: translate(100px, 100px);

  }

}

<div class="container">

</div>

Maintaining the final state at end of a CSS3 animation

Try adding animation-fill-mode: forwards;. For example like this:

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;

How to prevent a CSS animation from going back to its original position?

You need to use animation-fill-mode with a value set to forwards

From Mozilla Developer Network:

The target will retain the computed values set by the last keyframe
encountered during execution. The last keyframe encountered depends on
the value of animation-direction and animation-iteration-count

Demo

Restart CSS3 animation from where it left off?

Here's a non-jQuery version with CSS doing the animation. Javascript is needed to set left and then transition: left controls the animation.

Demo: http://jsfiddle.net/ThinkingStiff/UEt4Y/

Script:

document.getElementById( 'move-me' ).addEventListener( 'click', function () {

    var move = document.getElementById( 'move' );
    move.style.left = ( move.offsetLeft + 10 ) + 'px';

}, false );

HTML:

<button id="move-me">Move</button>
<div id="move"></div>

CSS:

#move {
    background: green;
    height: 50px;
    left: 0px;
    position: absolute;
    top: 100px;
    transition:             left 250ms ease-in-out;
        -moz-transition:    left 250ms ease-in-out;
        -ms-transition:     left 250ms ease-in-out;
        -o-transition:      left 250ms ease-in-out;
        -webkit-transition: left 250ms ease-in-out;
    width: 50px;
}

CSS Animation property stays after animating

I think you're looking for animation-fill-mode CSS3 property

https://developer.mozilla.org/en/CSS/animation-fill-mode

The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.

for your purpose just try to set

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;  
}

Setting forwards value «the target will retain the computed values set by the last keyframe encountered during execution»

CSS animation, absolute position go off screen to right and come back from left

Here's the solution I proposed in the comments before:

You can make an initial cloud (.initalCloud) that just slides out of the screen and gets replaced with the regular .firstCloud afterwards.

.clouds {

  position: relative;

  overflow: hidden;

  height: 400px;

}

.initialCloud {

  position: absolute;

  left: 100%;

  top: 150px;

  animation: moveFirst 5s linear .2s;

  animation-iteration-count: 1;

  width: 150px;

}

.firstCloud {

  position: absolute;

  left: -30%;

  top: 150px;

  animation: move 5s linear 5s infinite;

  width: 150px;

}

.secondCloud {

  position: absolute;

  left: -30%;

  top: 200px;

  animation: move 8s linear 0s infinite;

  width: 150px;

}

.thirdCloud {

  top: 250px;

  left: -30%;

  position: absolute;

  animation: move 11s linear 1s infinite;

  width: 150px;

}

@-webkit-keyframes move {

  from {

    left: -30%;

  }

  to {

    left: 100%;

  }

}

@-webkit-keyframes moveFirst {

  from {

    left: 50%;

  }

  to {

    left: 100%;

  }

}

<div class="clouds">

  <div class="initialCloud">

    <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164"><defs><style>.cloud1Fill{fill:#d1dbd9;}</style></defs><title>Untitled-5</title><path class="cloud1Fill" d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z"/></svg>

  </div>

  <div class="firstCloud">

    <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164"><defs><style>.cloud1Fill{fill:#d1dbd9;}</style></defs><title>Untitled-5</title><path class="cloud1Fill" d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z"/></svg>

  </div>

  <div class="secondCloud">

    <svg id="svgCloud2" data-name="cloud2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291 124"><defs><style>.cloud1Fill{fill:#d3dddb;}.cloud2Fill{fill:#fff;}</style></defs><title>Untitled-4</title><path class="cloud1Fill" d="M2.29,123.5A41,41,0,0,1,58.37,74.12l.32.14.24-.25A45.72,45.72,0,0,1,91.5,60.5q1.14,0,2.25.06l.43,0,.09-.41a76,76,0,0,1,148.46,0l.09.4h.41l1.27,0a46.06,46.06,0,0,1,46,46,45.53,45.53,0,0,1-3.26,17Z"/><path class="cloud2Fill" d="M168.5,1a75.53,75.53,0,0,1,73.74,59.23l.18.81.82,0,1.26,0a45.49,45.49,0,0,1,42.4,62H2.66A40.53,40.53,0,0,1,58.17,74.57l.63.29.49-.49A45.2,45.2,0,0,1,91.5,61c.75,0,1.5,0,2.23.06l.85,0,.18-.83A75.51,75.51,0,0,1,168.5,1m0-1A76.52,76.52,0,0,0,93.78,60.06Q92.66,60,91.5,60A46.35,46.35,0,0,0,58.58,73.66,41.52,41.52,0,0,0,1.92,124H287.58A46.5,46.5,0,0,0,244.5,60l-1.28,0A76.53,76.53,0,0,0,168.5,0Z"/></svg>

  </div>

  <div class="thirdCloud">

    <svg id="svgClouds3" data-name="clouds2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 329 139"><defs><style>.cloud2Fill{fill:#d1dbd9;}</style></defs><title>Untitled-6</title><path class="cloud2Fill" d="M329,125a40.09,40.09,0,0,1-2.52,14H14.9A61.28,61.28,0,0,1,0,99C0,64.21,29.33,36,65.5,36a67.34,67.34,0,0,1,30,7A86,86,0,0,1,236.42,31.37,55.53,55.53,0,0,1,311,83.5a56.67,56.67,0,0,1-.55,7.75A39.93,39.93,0,0,1,329,125Z"/></svg>

  </div>

</div>

Pure CSS rotate animation broken while in infinite loop

First I would simplify your code and use less HTML/CSS. Then I would consider only one animation where I will have both states.

The animation will be: the first flip then we keep the first color then the second filp then we keep the second color. It's divided into 12 time slots (1 + 5 + 1 + 5) (1+5 = 6 which is the number of the divs)

If the duration is S then the delay should be multiple of one slot S/12. Notice that I have used the perspective within the transform to avoid an extra element:

#loader {

  width: 240px;

  height: 100px;

  display: flex;

  flex-wrap: wrap;

}

#loader>div {

  width: calc(100%/3);

  position: relative;

  transform-style: preserve-3d;

  animation: spin 6s linear var(--delay, 0s) infinite;

}

#loader>div:before,

#loader>div:after {

  content: "";

  position: absolute;

  top:0;

  left:0;

  width: 100%;

  height: 100%;

  backface-visibility: hidden;

  background-color: var(--front, #db9834);

}

#loader>div:after {

  background-color: var(--back, #3498db);

  transform: rotateY(180deg);

}

/* -------------------------------------------------------- */

#loader>div:nth-child(2) {

  --front: #db8834;

  --back: #3488db;

  --delay: 0.5s;

}

#loader>div:nth-child(3) {

  --front: #db7834;

  --back: #3478db;

  --delay: 1s;

}

#loader>div:nth-child(4) {

  --front: #db6834;

  --back: #3468db;

  --delay: 1.5s;

}

#loader>div:nth-child(5) {

  --front: #db5834;

  --back: #3458db;

  --delay: 2s;

}

#loader>div:nth-child(6) {

  --front: #db4834;

  --back: #3448db;

  --delay: 2.5s;

}

@keyframes spin {

  0% {

    transform:perspective(500px) rotateY(0deg);

  }

  8.33%,

  50%{

    transform:perspective(500px) rotateY(180deg);

  }

  58.33% {

    transform:perspective(500px) rotateY(0deg);

  }

}

<div id="loader">

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

</div>

---

Related Topics