CSS Credits animation effect
CSS Credits animation
CSS Roll credits style animation effect for a HTML element using the CSS transform function tranform#translate .
<style>
.credits {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
animation-name: credits;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes credits {
/* cool cut out view
0% { transform: translate(0, 0);
clip-path: polygon(0 0, 100% 0%, 100% 26%, 0 26%); }
50% { transform: translate(0, -100%);
clip-path: polygon(0 0, 100% 0%, 100% 26%, 0 14%); }
*/
/* half half show
0% { transform: translate(0, 0);
clip-path: polygon(0 0, 100% 0%, 100% 0%, 0 0%); }
50% { transform: translate(0, -100%);
clip-path: polygon(0 0, 100% 0%, 100% 50%, 0 50%); }
/*52% { transform: translate(0, -100%);
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%); }
*
100% { transform: translate(0, -100%);
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%); }
*/
0% { transform: translate(0, 0%);
clip-path: polygon(0 0, 100% 0%, 100% 20%, 0 20%); }
50% { transform: translate(0, -50%);
clip-path: polygon(0 50%, 100% 50%, 100% 80%, 0 80%); }
75% { transform: translate(0, -100%);
clip-path: polygon(0 80%, 100% 80%%, 100% 80%, 0 80%); }
100% { transform: translate(0, 0%);
clip-path: polygon(0 0, 100% 0%, 100% 20%, 0 20%); }
}
</style>
- If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
- Remove the HTML style tag as needed.
- Change values in the code such as animation-duration as needed.
Animation effects source code licenced under
MIT Licence