Reverse css-animation on class removal without animation onload -
i want transition 1 additional step -webkit-clip-path. way know css animation.
click on menu-trigger adds class .menushown body. menu reacts animation. on removal of .menushown animation should reversed. way know animation on main element. way animation triggered on load.
here pen illustrating problem. additionaly can't animation-fill-mode work in example.
i use animation / transitions after adding / removing classes , have been wondering how done actual css animations without problem of initial animation.
http://codepen.io/katerlouis/pen/kxzadl
.menu { -webkit-clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%); animation: menuclippath 2000ms linear; animation-direction: reverse; } body.menushown .menu { animation: menuclippath 2000ms linear; // animation-fill-mode: forwards; } @keyframes menuclippath { 0% { -webkit-clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%); } 50% { -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 85%); } 100% { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
Comments
Post a Comment