CSS shake animation Just a simple code
Shaking an element can be very useful. It can call for attention and focus. For example, if you have a website and have introduced a new, important section in navigation, then just adding a New label may not feel convincing enough that the users, used to seeing the main content page, will notice it. You may have an e-store and introduce a brief sale offer, and you’d like the offer text to be attention-seeking enough for the users to notice. In such cases, you can animate those elements to shake and stand out in terms of attention.
<style>
.shakeit {
animation: shake-animation 2.72s ease infinite;
transform-origin: 50% 50%;
}
@keyframes shake-animation {
0% { transform:translate(0,0) }
1.78571% { transform:translate(5px,0) }
3.57143% { transform:translate(0,0) }
5.35714% { transform:translate(5px,0) }
7.14286% { transform:translate(0,0) }
8.92857% { transform:translate(5px,0) }
10.71429% { transform:translate(0,0) }
100% { transform:translate(0,0) }
}
</style>
<div class="shakeit"> Text Here ! </div>