Hello teachers and students all over the world, welcome to this week's engagement challenge. It's already Season 3 of our engagement challenge. And I am so happy to be participating on yet another amazing topic brought to us by the dynamic dev team. I shall now put in my entry.

In htmlcss, CSS Transform, Transition, and Animation are basic tools used to create dynamic and engaging web designs. Transform is use to change instantly an element's position, size, rotation, or shape. Transition offers smoothly animates changes between two states of an element, like hovering over a button.

Finally, Animation creates sophisticated visual effects by defining multiple states or keyframes for an element over time, allowing for elaborate and enchanting movements. Let's get to the homework.

Solution to Homework

Exercise 1

Create the following web page "Index.html" then the "styleTP.css" file.

I will start by creating two files, HTML language and CSS language. Using the guided quotes for the HTML5 program, I was able to reproduce A document with name "transition.html." And another one in CSS language with name styleTp.css.

^{HTML code}

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

After creating the CSS file, I then proceed too answer as requested. First of all by applying a dark screen to my entire document with a fuchsia pink text color and then center all titles.

^{primary. Background and text color change. CSS}

0utput

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

At this instance, I will be making the header appear in such a way that whenever the mouse cursor pass over, it should highlight itself. Making use of the Hover tag in CSS. Here are the codes and the output.

^hover

^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

Here I will be styling the borders of the image first of all by reducing the size to 75% and then rounding up the only corners by 50% and applying a double fuchsia pink color which will make The image more presentable.

^{double fuchsia pink border}

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.

At this point, I make use of the transition property in such a way that when the mouse cursor moves over the image, it folds at the edges. The top left and bottom right corner with a fold off 50% each.

^transition

^Output

From here I make sure I center my text and then proceed to the next stage.

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

Performing animation for the text, I started by applying a background color and text color to the text.

^{text background change}

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

I will be following strictly the properties that have been requested in question, by applying a transition in color from the listed colors. This is going to be possible with the help of @keyframes tag In CSS 3 file.

^{text background color change}

This animation is due to animate border radius 3 seconds and ease-in-out 1s. Equally animate my H3 The transition from right to left in the given intervals.

^{final Output}

I now drop a video presentation of this animation, transition state.