Guide: HTML & CSS - Animating & Transforming
Description
Adding animations is a great way to create pleasant experiences for your visitors, include tips on how to use the interface or just express yourself more fully on the web. In this Guide you will learn the tools CSS offers to create animations.
Knowledge
- Understand the basics of animation
- Understand the mechanisms CSS offers to animate
Skills
- Be able to create animations with CSS
Topics
- Transitions & @keyframes
- Transforms
- Easing
- Animating SVG
Action Points
- Study the main CSS concepts related to animation: transition, animation and @keyframes
- Understand how to use easing in CSS
- Find out how to use @keyframes to animate a SVG file
Deliverable: Full-screen landing page
- Submit:
- Glitch Project URL
- Add comments for each relevant code block
- Project description and details in the README.md file
- Glitch Project URL
- Minimum requirements
- One full-screen landing page for a product, service or general topic
- Must contain at least 2 animated elements on their own, or which do not require interaction
- Must contain at least 2 animated items which get animated upon some interaction, e.g. pointer :hover or element :focus
- Animations on the page must be created using CSS properties
- Javascript animations are welcome, if CSS animations are also in the project
- Result must be responsive
- Theme ideas:
- “Coming soon” landing page for product or service
- Minimal restaurant website
- Subscribe for mailing list
- Login/Sign-up page
- Cover for report