Stopping a CSS3 Animation on last frame

前端 未结 8 1214
伪装坚强ぢ
伪装坚强ぢ 2020-11-22 04:48

I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen.

However, it always goes back to its origin

相关标签:
8条回答
  • 2020-11-22 04:57

    The best way seems to put the final state at the main part of css. Like here, i put width to 220px, so that it finally becomes 220px. But starting to 0px;

    div.menu-item1 {
      font-size: 20px;
      border: 2px solid #fff;
      width: 220px;
      animation: slide 1s;
      -webkit-animation: slide 1s; /* Safari and Chrome */
    }
    @-webkit-keyframes slide { /* Safari and Chrome */
      from {width:0px;}
      to {width:220px;}
    }  
    
    0 讨论(0)
  • 2020-11-22 04:57

    Isn't your issue that you're setting the webkitAnimationName back to nothing so that's resetting the CSS for your object back to it's default state. Won't it stay where it ended up if you just remove the setTimeout function that's resetting the state?

    0 讨论(0)
  • 2020-11-22 04:58
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-fill-mode: forwards;
    

    Browser Support

    • Chrome 43.0 (4.0 -webkit-)
    • IE 10.0
    • Mozilla 16.0 ( 5.0 -moz-)
    • Shafari 4.0 -webkit-
    • Opera 15.0 -webkit- (12.112.0 -o-)

    Usage:-

    .fadeIn {
      animation-name: fadeIn;
        -webkit-animation-name: fadeIn;
    
        animation-duration: 1.5s;
        -webkit-animation-duration: 1.5s;
    
        animation-timing-function: ease;
        -webkit-animation-timing-function: ease;
    
         animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
    }
    
    
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }
    
    @-webkit-keyframes fadeIn {
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }
    
    0 讨论(0)
  • 2020-11-22 05:03

    I learned today that there is a limit you want to use for the fill-mode. This is from an Apple dev. Rumor is * around * six, but not certain. Alternatively, you can set the initial state of your class to how you want the animation to end, then * initialize * it at from / 0% .

    0 讨论(0)
  • 2020-11-22 05:09

    If you want to add this behaviour to a shorthand animation property definition, the order of sub-properties is as follows

    animation-name - default none

    animation-duration - default 0s

    animation-timing-function - default ease

    animation-delay - default 0s

    animation-iteration-count - default 1

    animation-direction - default normal

    animation-fill-mode - you need to set this to forwards

    animation-play-state - default running

    Therefore in the most common case, the result will be something like this

    animation: colorchange 1s ease 0s 1 normal forwards;
    

    See the MDN documentation here

    0 讨论(0)
  • 2020-11-22 05:15

    You're looking for:

    animation-fill-mode: forwards;
    

    More info on MDN and browser support list on canIuse.

    0 讨论(0)
提交回复
热议问题