https://github.com/NiallEccles/Hacktoberfest-animations

Small animation selector for Hacktoberfest
https://github.com/NiallEccles/Hacktoberfest-animations

animation hacktoberfest

Last synced: 4 months ago
JSON representation

Small animation selector for Hacktoberfest

• Host: GitHub
• URL: https://github.com/NiallEccles/Hacktoberfest-animations
• Owner: NiallEccles
• Created: 2018-10-01T20:21:17.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-29T12:37:41.000Z (8 months ago)
• Last Synced: 2024-01-16T13:13:53.528Z (5 months ago)
• Topics: animation, hacktoberfest
• Language: CSS
• Homepage: https://nialleccles.github.io/Hacktoberfest-animations/
• Size: 9.22 MB
• Stars: 152
• Watchers: 4
• Forks: 426
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Code of conduct: CODE_OF_CONDUCT.md

Lists

• awesome-stars - NiallEccles/Hacktoberfest-animations - Small animation selector for Hacktoberfest (CSS)
• docsify-awesome-stars - NiallEccles/Hacktoberfest-animations - Small animation selector for Hacktoberfest (CSS)
• awesome-hacktoberfest - Hacktoberfest Animations

README

        


[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

# Hacktoberfest-animations

Small animation selector for Hacktoberfest

## How to contribute

- Fork this repo

- Create a new CSS file with your cool animation name inside `./animations` folder, be creative!

- Edit the `./animations.js` file to include your animation using the following structure:

```js

{

    name: 'the-name-of-your-animation',

    author: 'your-github-username'

}

```

**PS**: the animation name should have the same name of your CSS file.


**PS²**: although it is not necessary to include your object alphabetically (there is a function that will do this automatically afterwards), it is recommended that you do so to keep the project organized.


**PS³**: use the same name of your CSS file as your animation class. Example: a file named `my-cool-animation.css` containing a `.my-cool-animation` class inside.

- DONE!

If you have any problems/questions or issues please submit an issue and I will get to you!

Don't forget to star!

## Showcase

![boogie by jdsteinbach](https://raw.githubusercontent.com/NiallEccles/Hacktoberfest-animations/master/showcase/boogie.gif)

boogie by [jdsteinbach](https://github.com/jdsteinbach)

![colours by zerossB](https://raw.githubusercontent.com/NiallEccles/Hacktoberfest-animations/master/showcase/colours.gif)

colours - [zerossB](https://github.com/zerossB)

![glitch by OhmSainz](https://raw.githubusercontent.com/NiallEccles/Hacktoberfest-animations/master/showcase/glitch.gif)

glitch by [OhmSainz](https://github.com/OhmSainz)

![heartbeat by azrizhaziq](https://raw.githubusercontent.com/NiallEccles/Hacktoberfest-animations/master/showcase/heartbeat.gif)

heartbeat by [azrizhaziq](https://github.com/azrizhaziq)

![neon by Kalugin Pavel](https://raw.githubusercontent.com/NiallEccles/Hacktoberfest-animations/master/showcase/neon.gif)

neon by Kalugin [Pavel](https://github.com/Pavel)

![tada by MariMendes](https://raw.githubusercontent.com/NiallEccles/Hacktoberfest-animations/master/showcase/tada.gif)

tada by [MariMendes](https://github.com/MariMendes)

![typewriter by aihowes](https://raw.githubusercontent.com/NiallEccles/Hacktoberfest-animations/master/showcase/typewriter.gif)

typewriter by [aihowes](https://github.com/aihowes)

![pumpkins by ashwoodall](https://raw.githubusercontent.com/NiallEccles/Hacktoberfest-animations/master/showcase/pumpkins.gif)

pumpkins by [ashwoodall](https://github.com/ashwoodall)

![border rainbow by brunobolting](https://raw.githubusercontent.com/NiallEccles/Hacktoberfest-animations/master/showcase/border-rainbow.gif)

border-rainbow by [brunobolting](https://github.com/brunobolting)

## Notable Contributions

Huge thanks to [rn4n](https://github.com/rn4n) for massively improving the structure of the project.