神刀安全网

Wait! Animate – an easy way to pause a CSS animation before it loops again

Wait! Animate – an easy way to pause a CSS animation before it loops again

By default, CSS is not providing you an easy way to pause an animation before it loops again. You can use animation-delay property but it will simply indicate a delay before the animation starts. Will Stone – a passionate web developer from UK, fixed that.

He created Wait! Animate – a nice CSS animation tool which provides an easy way to calculate the keyframe percentages so that you can insert a delay between each animation iteration. Moreover, Will created a config tool that adds waiting time to your own animations without the need of JavaScript.

Have a look at these examples to see how it works. You can also set up a custom wait time and copy the code on the original website.

See the Pen Waitanimate by designhooks ( @designhooks ) on CodePen .

Will Stone was happy to tell us the story behind this cool project. Here it is:

“It all started when I was using the Font Awesome Animation library. I found that the animations repeated too quickly for the project I was working on. I knew that there was no such CSS property as “animation-wait”, so the only solution was to use JavaScript. I realised that it was simply an equation of animation-duration and where in the keyframes the animation ends. I originally wrote a piece of SASS that calculated all the keyframes up to 30 seconds wait time, to create an augmented version of the library. This was clearly a poor solution as there was no way somebody would require all the variations. A tool to calculate the exact wait time was needed. Hence WAIT! Animate was devised.”

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Wait! Animate – an easy way to pause a CSS animation before it loops again

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址