https://github.com/kaplanh/animation-example

The project aims to create an animated page using CSS animation, transform, transition JS DOM Manipulation.
https://github.com/kaplanh/animation-example

Last synced: 3 days ago
JSON representation

The project aims to create an animated page using CSS animation, transform, transition JS DOM Manipulation.

• Host: GitHub
• URL: https://github.com/kaplanh/animation-example
• Owner: kaplanh
• Created: 2023-06-01T16:41:48.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-01-10T23:09:12.000Z (10 months ago)
• Last Synced: 2024-01-11T00:51:33.843Z (10 months ago)
• Language: HTML
• Homepage: https://kaplanh.github.io/animation/
• Size: 826 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Project-008 : Animation Example

[Click Me !](https://kaplanh.github.io/animation/)

![animation example](https://github.com/kaplanh/animation/assets/101884444/4fc2ada3-2998-4088-bea9-d041d48630b3)

## Description

The project aims to create an animated page using CSS animation, transform, transition JS DOM Manipulation.

## Project Skeleton

```

Animation Example((folder)

|

|---- index.html

|---- app.js

|----readme.md

```

### The following topics were addressed in the project;

-   HTML

    - audio tag

    - 

-   Css

    -   Animation

    -   @keyframes 

    -   Transform Property

    -   Transition property

    -   The Display Property

    -   CSS Flex

    -   Units in CSS

    -   CSS Setting height and width

    -   CSS Combinators

-   JS

    - DOM

    - window.addEventListener()

    - click() event

    - query selectors

    -  play()

### At the end of the project, developers will be able to;

-   improve coding skills within HTML & CSS, Animation and JS DOM

-   use git commands (push, pull, commit, add etc.) and Github as Version Control System.

## Notes

-   You can use HTML, CSS  and Javascrip to complete this project.

 ⌛ Happy Coding  ✍