Happy Fall-o-Ween
Tags: css, html, animation, learning
Published: 2019-10-30 15:03:10

---
title:  Happy Fall-o-Ween
published: true
description: My first animation project
tags: css,html,animation,learning
---

:jack_o_lantern: **Happy Fall-o-ween Project** :jack_o_lantern:

This is my first animation project, and my first post here on DEV. :smiley:
So please forgive any formatting and grammar issues.
   
This is the 3rd and final project of 3. 

Here are the first two projects, which I ended up combining to make into this one.

[Falling Leaves project](https://github.com/thenewmona/halloween-2019/tree/master/fall%20leaves)  

[Bouncy Pumpkin project](https://github.com/thenewmona/halloween-2019/tree/master/pumpkin)

I was looking to challenge myself and work on my CSS/HTML, and I was tired of doing login forms, navbars, contact pages, etc.  

I received an email for [Codevember](http://codevember.xyz/about), which led me to [codier's challenge page](https://codier.io/).  

So I decided to have a little fun and do their [Halloween challenge](https://codier.io/challenge/ryrOv1xcX?page=2#solutions).  

While doing research on something that I was having issues with, I came across this tutorial[Pure CSS Leaves Animation Effects - Latest Html and CSS Animation Effect Tutorial](https://www.youtube.com/watch?v=fD_AuhsheuU).  

Living in Michigan the leaves :leaves: are totally awesome right now. 
So I decided how cool would it be to combine the two projects. 

## Issues, struggles, obstacles

There were many times during this project, as simple as it seems, I truly felt I bit off more than I could chew.  
But I was determined, and did not go to bed til 2am getting this done. 

It is not everything I wanted it to be, when you look at the readme's for the projects, you can see that I wanted to do some text animation, and also include some sound. 

When people say you don't need to be good at math to code have never had to figure out the degree's you have to rotate something to make it work. :frowning:

Doing this project was a lot different than doing the login forms, sign-up forms, and static web pages. 

There is not a lot of HTML involved, and I had to do a lot of research, especially in regards to `@keyframes`, `transform`, `translate`, was the hardest. 

For me this was like `@media`, and `aria` setting in normal projects. 

It was still fun to do. 

Well off to do the next project. :ghost:
Since I live in Michigan, and we have a major :snowflake: snowstorm coming. 

Think I need to make a ghost page with falling snow . :smiley:

## Resources used 

I used a lot of resources from Free Code Camp's Applied Visual Design section.

Listed below are just some of them. 


[Before and After pseudo elements explained - part one: how they work](https://www.youtube.com/watch?v=zGiirUiWslI)

[CSS Animation Tutorial #4 - Keyframes](https://www.youtube.com/watch?v=PjR97QzOrJM)

[Applied Visual Design: Use the CSS Transform scale Property to Scale an Element on Hover](https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover)

[Applied Visual Design: Make a CSS Heartbeat using an Infinite Animation Count](https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count)