New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

http://waitanimate.eggbox.io/ ，CSS 動畫延遲產生器 #84

Open

Rplus opened this issue May 18, 2016 · 1 comment

Labels

animation css online tool

Member

Rplus commented May 18, 2016

WAIT! Animate
http://waitanimate.eggbox.io/

Provides an easy way to calculate CSS keyframe percentages so that you can insert a delay between each animation iteration.
github repo: https://github.com/eggboxio/waitanimate

一般在處理動畫時
會採用 animation-delay 來產生延遲的效果
不過這延遲效果只有在第一次觸發前有效

若你的動畫需要在每次循環時都有同樣的延遲效果就比較麻煩
而這網站可以幫你計算 wait time & animation-duration 的比例
重新幫你計算好 animation keyframes 裡的 % 值

如果是想直接採用較基本的動畫樣式
也可以直接使用這網站提供的 transform 選項，直接點選預覽

Rplus added online tool css animation labels

Member Author

Rplus commented May 18, 2016

screenshot:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment