A collection of afterimage effects in CSS animation

The afterimage effect impresses viewers. The user is exposed to a lot of content, it can not separate important content from other, it is confused every day. This collection exists to make the content that you want to convey more attractive.

You can install via npm

npm install zann.css --save

Insert link to your website files, and set the zann.css reference.

<link rel="stylesheet" href="zann.css">

In the case of using CDN hosted.

<link rel="stylesheet" href="https://unpkg.com/zann.css">

Just add CSS classes to the element on your website files.

<div class="zann zann-closet--on"></div>

Every class has animations of

• zann-closet
• zann-edge
• zann-ripple
• zann-ripple-back
• zann-scan
• zann-scramble
• zann-slide
• zann-slide-back
• zann-wipe

Please check the behavior on the demo site.

Combined with UI framework like Vue.js, it is more effective. For basic usage of Vue.js, please refer to the wonderful document of the head family.

<!--
This is an example of turning on / off closet effect when clicked. Try it.
-->
<div id="app" @click="isActive = !isActive">
  <div class="zann" :class="{ 'zann-closet--on': isActive, 'zann-closet--off': !isActive }"></div>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
  el: '#app',
  data: {
    isActive: false
  }
});
</script>

This is an example of turning on / off closet effect when clicked. Try it.

Free to use under the MIT license.