CSS animation using webkit-keyframes
Welcome to my CSS Animation project.
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.
--Piano--
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.