 Hello everyone. My name is Samprit Patel, Assistant Professor, Department of Computer Science and Engineering, Vulture Institute of Technology, Sholapur. We are going to see about animations and transitions in CSS, that is cascading style sheets. At the end of this video, the students will be able to understand the animations and transitions with their properties in CSS. Students will also be able to apply these animations and transitions to an HTML page. The content that we are going to cover in this video is animations and transitions. Today, with the development in web technologies and using the website as a marketing tool, it is very essential that the website should be as attractive as it can be. So, to make this website attractive and catchy, we use animations and transitions in it. An animation lets an element gradually change from one style to another. This process of making shape changing and create motion with elements. You can change as many CSS properties you want, as many times you want. So, moving forward, these are some properties that are used in animations to create an animation to an element. The first property is Adderit keyframes. This is used to specify the animation code. The second property is animation, which is a shorthand property for setting all the animation properties. With this property, you can set all the animation properties in a single code. The third is Animation Delay. This specifies the delay for the start of an animation. Animation Direction specifies whether the animation should be played forward, backward or in alternate cycles. Animation Duration specifies how long an animation should take place. After that, Animation Fill Mode specifies the style of an element when the animation is not playing. That is, whether the given color should be kept red or it should change to another color. This depends on animation Fill Mode. Animation Iteration Count specifies how many number of times the animation should take place on an HTML page. Animation Name. It specifies the name of the keyframe animation. Animation Play State. This defines whether the animation is running or paused. Therefore, it gives the state of the animation. Animation Timing Function. This function specifies the speed curve of the animation. After understanding the functionalities of the properties, we will now see their syntax and how they are used. So, the syntax for keyframe is at the keyframe followed by the animation name that can be anything by the user's choice. In the bracket, you have to specify the CSS style sheet of that animation. The second property was animation. The syntax is animation colon name that is the name of the keyframe. Then you can give a duration that is the second property. After that, you can give the timing function, the delay, the iteration count, the direction, the fill mode and the play state. It is not mandatory that all the properties should be defined in the animation. If you only want to define the duration and delay, you can only define duration and delay and others can be left blank. Ending with a semicolon. The third property is animation delay. The syntax is animation-delay colon. Now you can give three types of inputs to this delay. You can give either the time which is in seconds or you can also use the keywords initial or inherit. Initial will take the default value for the delay that is one second and inherit will inherit the delay which is used in the body of the CSS if it is mentioned. Now the property was animation direction. So it defines in which direction the animation should take place. The syntax is animation-direction colon. Now these are the values that can be used for the property normal, reverse, alternate, alternate, reverse, initial and inherit. So normal defines from left to right, reverse from right to left, alternate from which will go from left to right then right to left. After that alternate reverse it will start from right to left and then end from left to right. Initial will give it default that is left to right and inherit will inherit any CSS if it is defined in a keyframe. The duration. The duration will have three types of inputs. It is either time which is given in seconds, initial and inherit. Initial and inherit will work as same as it was used in delay. Animation field mode. Animation field mode syntax has six values none that is it will keep the default properties of the CSS. Forward backwards will change the field mode from forward and backward. Both will give the field mode from both the sides. Initial will give us default value and inherit will inherit any property if defined. Animation iteration count. Now iteration count will have four properties. You can specify the number of iterations that you want. Or it can be put in an infinite loop. It can take the initial that is default value. It will take place for a single time. The animation will go for a single time and inherit if it has been defined in a keyframe properties. After that we have animation name. Now animation name is the keyframe name we have given while defining a keyframe. Animation play state will have four properties. Initial and inherit will have same properties that is defined for the others. Initial will take default and inherit will inherit any property that has been defined before. After that we have timing function. Animation time gives the timing function as linear is in is out. Is in is it will come from the screen to the screen. Is out will go from the screen towards the screen. Is in is out will get an alternate. Step start, step end, step in start end. Cubic browser which will take four parameters. Initial and inherit. We will see in a while how to use these properties with an example. Moving forward we have transitions. The CSS transitions allows you to change the property of a value smoothly from one value to another over a given period of time. To create a transition effect you must specify two things. One is the CSS property you want to add an effect to and the duration of that effect. We will see some properties. The transition have five properties and we will see the functionalities for the same. The transition is a short hand for length of time it takes for an animation to complete one cycle. Transition delay establishes preset acceleration curves such as is or linear. Transition duration the time between the element being loaded and to start the animation sequence. Transition property sets the direction of the animation after the cycle is default recess on each cycle. Transition timing function the number of times the animation should be performed. Now we see the syntaxes for the properties. The property for transition is transition colon property duration timing function delay initial and inherit. So as I said transition is a short hand so you can either give all the properties or either specify all the properties or only specify the properties you require. So first value is the duration the second is timing function the third is delay fourth is initial and inherit. Transition and inherit will work as same specified before. Transition delay specifies the delay the transition should have it has three values times with time which is specified in seconds initial and inherit. Same as duration it will take three values first one will be taken in seconds and the other two will work as same as before. Transition property specifies none all property initial and inherit and the timing function will specify how the transition will work whether it will be linear or it will be ease or ease in ease out and so on. Pause the video and try to solve the given problem statement write a CSS code to rotate an element clockwise from its original position. Now we'll see the answer and with this answer I'll also try to explain how to use transition and animation. Now this is the style sheet where we have defined the element how it should look it should be inline block with a color this particular hash code is for blue. The height of that element is 100 pixels and the width is 100 therefore the element is a square box. The font size is one we are not using a font size but still we have defined it if in case we need to use in future the padding between is one pixel the color for the font will be white margin to the right and left is left with five pixels. Now these are the animations that are defined the animation function is roll it will roll for three seconds for infinite number of times. After that we have used a property transform to rotate that particular element with 30 degrees. Now we have defined a key frame with a name animation name roll which will rotate the particular element if it is at 0% it will rotate with 0 degrees. And if it is at 100% it will rotate the element at 360 degrees. Now after defining the style sheet we have created an HTML page which calls this element or rather creates this element with the help of this class that we have defined in CSS. Now I will run this particular HTML page so see the element is 100 by 100 pixels of blue color and it rotates according to the 0% and 100%. Now if we need to change the look of this particular thing at 0% we will give background color as red and similarly at the end of the 100% we will give the background color as yellow. We will save the style sheet and we will refresh so see it starts with red ends with 0 then it applies the default and again starts the animation. I hope you have understood this example and how to use this the important thing is you have to define all the transitions in a key frame and you have to use that key frame. So moving forward we will see the difference between a transition and animation. Transition occurs when an element changes from one state to another that is the transition have only two states it is the start state and the end state. Whereas the animation can have as many as states you want you can define these states with the percentage like 0, 25, 50, 75 or 100 or any other percentage you want. The transitions are limited to these two stages that is it will go from one state to another that is A from to B. Whereas animations can go from A to B to C to D or any number of stages you have specified. If you want to change an element from one stage to another smoothly a transition is a good choice. If an animation needs to run when the page loads or is more complex than a simple A to B state then the CSS animation might be more appropriate. I hope you have understood how to use transitions and animations. These are some references that can be referred if you want to know more about this and you want to see more examples about animation and transitions. Thank you.