SEC S19W3 || Animation, Transition & Transform (HTML5+CSS3)

Hello guys,
It's a pleasure to be part of this week's engagement challenge which goes with the title Animation, Transition & Transform (HTML5+CSS3). This week the contest is organised by @kouba01 and it is a beautiful contest as all hands are on practicals. So without further ado I will like to start immediately.

^{Background image Edited on Canvas}

Exercise 1:

---

Apply a dark gray background to the entire document and fuchsia pink text color by default, center the titles

Having created the web page "Index.html" then the "styleTP.css", I moved to the second question which says I should apply a dark gray background to the entire document and fuchsia pink text color by default, center the titles. The codes for both HTML and CSS for this operation can be seen below.

HTML code

CSS code

Output

Apply a light gray background When you move the mouse cursor over the page title

Since we have finished with the first question, we move to the next which says we should apply a light gray background When you move the mouse cursor over the page title. Here we are taking h1 as the title so the CSS code and the results of the output can be seen below.

CSS code

Output

Apply a double fuchsia color border to the image, an image width of 75% and an automatic image height and rounding of images by 50% in the top left and bottom right corners

Still on the CSS code, we are going to be making some adjustment to the image using the instructions "apply a double fuchsia color border to the image, an image width of 75% and an automatic image height and rounding of images by 50% in the top left and bottom right corners". So the CSS code and the output can be seen in the screenshot below.

CSS code

Output

When you approach the mouse cursor over an image a transition is triggered allowing you to move its rounding towards the top right and bottom left corners. This transition has a one second wait before triggering. It lasts 3 seconds and is fast at the beginning and decelerates at the end.

Still on the CSS part of the code we are going to carry out this function. "When you approach the mouse cursor over an image a transition is triggered allowing you to move its rounding towards the top right and bottom left corners. This transition has a one second wait before triggering. It lasts 3 seconds and is fast at the beginning and decelerates at the end." The CSS code as well as the output can be seen below.

CSS code

Output

An animation is performed for the text. It consists of changing the font color and the background color.

Here in this section, we will be applying an animation on the text below the image and this animation consist of changing the font colour and the background colour. To achieve this we will be using the animation function in CSS which is textcolorchange and the we apply the keyframes function to it.

Here I will be working with the colors (background, font) change in 5 animation intervals respectively as follows: (white, red) → (yellow, brown) → (light green, dark green) → (aqua, blue) → (fuchsia, black ) The CSS code and the screenshot of the output can be seen below.

CSS code

Output

An animation allows you to change the alignment of the last title. The title is initially right aligned with a yellow color shadow and an orange color shadow, font size equal to 150%. The animation allows you to change the alignment in three intervals as follows: right then center then left. The animation lasts 1 second and loops alternately 30 times.

The last title aside the footer I'm taking into consideration in this task is h3. Here the title is initially right aligned with a yellow color shadow and an orange color shadow, font size equal to 150%. The animation allows you to change the alignment in three intervals as follows: right then center then left. It starts again and continuous in same manner. The CSS code responsible for that can be seen from the screenshot below the output is also seen below.

CSS code

Output

Final Results View