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

Greetings Steemit friends

It's time to give a try for Animation, Transition & Transform (HTML5+CSS3). I'm not doing lots of learning, and thanks for the opportunity.

I will start with homework 1, which needs me to create two files. That is the index.html and styleTP.css files.

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

Source 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

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

Source code

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

Source code

---

Exercise 2:

---

Here I started by setting gallery pages, displaying the different images.

Output

Source code

Here, I apply an enlargement effect to the images whenever a cursor is hovered over.

Failed to achieve CSS Rotation

This exercise expected me to demonstrate an understanding of CSS Shading, CSS Rotation, and some level of Animation.

---

I invite @rosybelyepez, @menkemndi, @strawberrry

---

Cheers
Thanks for dropping by
@fombae