当前位置: 动力学知识库 > 问答 > 编程问答 >

css - how to get keyframe animation to stop at final stage

问题描述:

with the css:

.show-left-menu {

-webkit-animation-name: leftSidebarAni;

-webkit-animation-duration: .25s;

-webkit-animation-timing-function: ease-out;

-webkit-animation-iteration-count: 1;

}

@-webkit-keyframes leftSidebarAni {

0% {

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

}

80% {

-webkit-transform: translate3d(84%, 0, 0);

}

100% {

-webkit-transform: translate3d(79%, 0, 0);

}

}

how do i get a div with a class of 'show-left-menu' to stay at the final (100%) stage?

网友答案:

You have to add -webkit-animation-fill-mode: forwards; to the .show-left-menu CSS.

CSS:

.show-left-menu{
    -webkit-animation-name: leftSidebarAni;
    -webkit-animation-duration: .25s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-fill-mode: forwards;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: