5: Learning.

Next, Css animation.

The link that I have jot down on my Learning plan was very useful as the information was very clear and complete. It also have references for the codes in which is very necessary for me as coding has a very specific way of working.

Tried the background color animation first.

A gif of the background color change animation working.

Clipped the Css animation using Css clip path to see if it works. It does. 

A gif of a user triggered animation. The animation (circle become bigger) is only triggered when the cursor touches the initial circle (the smaller, untriggered one).

Added another code (animation-delay) in it. It works as the color change only starts after 10 sec delay.

There are more Css animation code in the webpage that I referred to, however I have decided to stop the exploration here as I have already grasp how css animation works. The whole process of exploring Css animation took around 1 hour 15 min. Shorter than Css clip path.


Reference:

W3schools.com, (2015). CSS3 Animations. [online] Available at: http://www.w3schools.com/css/css3_animations.asp [Accessed 24 Nov. 2015].

• The webpage in which I refered to while learning Css animation. The clear and complete information has been very helpful to me thus this is the only website that I referred to for Css Animation.