This repository consists of a playground to practice animations. Currently, it is not part of the goal to make this page aesthetically pleasing but rather just showcase the core of each of the animations.
| Section | Link |
|---|---|
| 🎯 Goal | Goal |
| 📁 Project Files | Project Files |
| ✨ Features | Features |
| ⚙️ Installation Instructions | Installation Instructions |
| 📝 Usage Instructions | Usage Instructions |
| 📜 License | License |
- index.html: The main HTML file responsible for content display.
- style.css: Contains the styles that determine the appearance of the webpage and animations.
- Grow on Hover: When an item is hovered over, it grows while the others are shrinked.
- Card Rotation with Change of Content: When hovering over the card, it turns around showing its back that contains more information.
- Dynamic Input Field: Label moves up to create space for the user information when the input is focused. When unfocused, if the input contains text, the label stays up and if the input is empty, the label goes back to its original position.
- Card Slide on Click: Two clickable cards are diplayed. When one of them is clicked, a sliding card moves (overlaping it) to highlight the respective selected card, and more info is shown inside it.
Last updated: 23-Aug-2024, 07:08
To evaluate browser compatibility, three levels are used:
- ✅ Full Compatibility: All features work as expected.
- 🟡 Partial Compatibility: Some features work as expected.
- ❌ No Compatibility: None of the features work as expected.
If a browser is not listed below, it has not been tested yet.
| Browser | Compatibility |
|---|---|
| Google Chrome | ✅ |
| Microsoft Edge | ✅ |
| Mozilla Firefox | ✅ |
| Opera | ✅ |
| Safari | 🟡 |
- This table will be updated regularly as more browsers are tested.
- If you encounter issues in a browser (listed or not listed), please report it.
Open the live page or:
- Clone the repository to your local machine using:
git clone https://github.com/SaraFreitas02/animations
- Navigate to the project directory.
cd animations - Open each respective
index.htmlin your preferred web browser to view the webpage.
Interact with each item to explore the animations and have fun.
This project is licensed under the CC0 1.0 Universal Public Domain Dedication.
This means you can:
Copy, modify, distribute, and use the work, even for commercial purposes, without asking permission.
For full details, see the license here.