[CSS] Animate on Your Page and Fix Shaky Animation!
Have you ever imagined that your web page is animated? with css, you can easy to make it!
1. Make Animation Frame
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @keyframes moveInLeft { 0% { opacity: 0; transform: translateX(-100px); } 80% { transform: translateX(10px); } 100% { opacity: 1; transform: translate(0); } } | cs |
I'm going to explain this css keyframes code, This animation name is moveInLeft. Each % is has an animation values in the duration. For instance, if I give the duration 1s, at zero second, the opacity is 0 and the tag position is -100px of x axis, and then, at 0.8 second the tag moves to 10px righter than the basic position.
2. Implements the Animation on Your Tag.
1 2 3 4 5 6 7 8 9 10 | .heading-primary-main { display: block; font-size: 60px; font-weight: 400; letter-spacing: 35px; animation-name: moveInLeft; animation-duration: 1s; animation-timing-function: ease-out; } | cs |
Your can give your own keyframe animation to any tags but Remember that you must set a duration up!
or you can easy to set it up like below.
1 2 3 4 5 6 7 8 | .heading-primary-main { display: block; font-size: 60px; font-weight: 400; letter-spacing: 35px; animation-name: moveInLeft 1s ease-out } | cs |
3. Fix Shaky Animation.
If you have sharp eyes, you can realize the our animation is little bit shaky end of it. Therefore, you should write one of tag on its parent tag.
1 2 3 4 5 6 | .heading-primary { color: #ffffff; text-transform: uppercase; backface-visibility: hidden; } | cs |
Done!. backface-visibility property fix the weird animation!.
Korean 
English