# CSS 按鈕動畫
這次要利用clip-path和animation的搭配做出cyberpunk的故障按鈕風格。 <br>


關鍵因素就是先打造一個沒有動畫的按鈕，之後利用偽元素，將該按鈕複製且重疊到原本按鈕上，之後利用**clip-path**，擷取好幾個按鈕部分，並利用變數儲存起來。 <br>

之後利用keyframes，設定0%~100%，每個中斷點都利用**translate**和**clip-path**即可。

-------------(細節待補)----------------

<iframe src="https://codesandbox.io/embed/intelligent-violet-kizu3?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="intelligent-violet-kizu3"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>