Welcome to my CSS Animation

Here, I have displayed CSS animation through the use of webkit @keyframes and created a piano using CSS and other moving elements on the screen. I have used an audio file that plays Beethoven music when the page loads in the background.


I used the CSS Piano example by 'Pure CSS3 Piano by Taufik Nurrohman' that can be found at "http://cssdeck.com/labs/pure-css3-piano" to create this smaller version of the piano. I used a unordered list to make this.On click of the piano key, I have added box shadows, linear gradient and z index to look like it's pressed.

~~Text scroll~~

I used transform properties perspective and rotateX as well as pseudo elements to create this.

~~Moving heart elements~~

I used the Shapes of CSS example on "https://css-tricks.com/examples/ShapesOfCSS/" to create this heart and animated the hearts to move horizontally using webkit-keyframes and changed the opacity to make it look realistic.

CSS Animation by:Princy Mascarenhas

Student Number: N01258381

Section: A

~~Thank You~~