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.
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