CSS & JavaScript Animation Challenge (Individual Entry).
Table of Contents
About the Competition:
Create visually striking, interactive front-end web animations using CSS or JavaScript.
Rules
- Theme & Concept – Choose one: Loaders, Hover animation, animated illustration.
- Originality – Must be an original, hand-coded creation with no AI-generated or pre-built libraries.
- Software & Tools – Any code editor, CSS, and vanilla JavaScript.
- Canvas Size & Responsiveness – Use scalable, responsive units and test for standard viewports.
- No Explicit Content – Must be suitable for all audiences.
- Submission Format – Code files, hosted demo link, and optional video demo.
- Judging Criteria – Creativity, animation smoothness, interactivity, load time, and responsiveness.
- Time Limit – 1 day.
- Color Usage – Maintain harmony, appropriate contrasts, and theme alignment.
- File Size – Images below 2MB.
- No. of Participants – 1.
- File Name – WebAnimationChallenge_HouseName_StudentID_StudentName
Norms in Judging
- Creativity
- Animation Smoothness
- Code Cleanliness
- Interactivity
- Load Optimization
- Compatibility
- File Structuring
- Color Harmony
- Mobile Behavior
- Presentation
References for Ideas
Create a page based on an event schedule, product showcase, blog, or portfolio.
- https://codepen.io/collection/AGZzpz/
- https://animista.net/
- https://css-tricks.com/snippets/css/css-keyframe-animation-syntax/
- https://webdesign.tutsplus.com/collections/creative-css-animation-examples–cms-93287
- https://codemyui.com/tag/css-animations/
