Unit 2- Multimedia Animation CSS Animations: CSS Animations allow developers to create dynamic and engaging web experiences by animating various properties of HTML elements. With CSS Animations, you can control the duration, timing, and speed of an animation to create the desired effect. Creating a Simple Animation: To create a simple animation, you can use the CSS ‘animation’ property. This property allows you to specify the duration, timing function, delay, and other properties of the animation. For example, the following code animates a box element to move from left to right: box { animation-name: move; animation-duration: 2s; animation-timing-function: ease; animation-delay: 1s; animation-iteration-count: infinite; } @keytrames move { 0% (left: 0; } 100% { left: 100%; } In this example, the “animation-name’ property is set to ‘move’, which corresponds to the “@keyframes’ rule defined below it. The ‘animation-duration’ property specifies the length of the animation, while the ‘animation-timing-function’ property sets the speed curve of the animation. The ‘animation-delay’ property specifies how long the animation should wait before starting, and the ‘animation-iteration-count property sets how many times the animation should repeat. CSS Animation Property: The ‘animation’ property is shorthand for setting several animation’ properties at once. It includes the ‘animation-name’, ‘animation-duration’, Tejaswi S, Asst. Prof. Dept. of Computer Science, Seshadripuram Degree College, Mysuru*animation-timing-function’, ‘animation-delay’, ‘animation-iteration-count’, and “animation-direction’ properties. For example, the following code sets a *bounce’ animation to the * ball’ element, with a duration of *1s’, a timing function of ‘ease-out', a delay of ‘0.5s', and 3 iterations: ball { animation: bounce 1s ease-out 0.5s 3; } @keytrames bounce { 0%, 100% { transform: translateY (0); } 50% { transform: translateY (-20px); } } Keyframes: The “@keyframes’ rule is used to define the stages of an animation. It allows you to set the CSS properties of an element at various points during the animation. In the previous examples, the ‘@keyframes’ rule was used to define the "move" and *bounce’ animations. It specifies the percentage of the animation duration at which each keyframe occurs, and the CSS properties that should be applied to the element at each keyframe. Declaring Multiple Animations: You can declare multiple animations for an element by separating them with commas in the ‘animation’ property. For example: box { animation: move 2s ease Os infinite, color 1s linear 1s infinite; In this example, the °.box’ element is animated using two animations: ‘move’ and ‘color’. The “move” animation has a duration of ‘2s’, an ease timing function, no delay, and repeats infinitely. The ‘color’ animation has a duration of ‘1s’, a linear timing function, a delay of ‘1s’, and also repeats infinitely. Tejaswi S, Asst. Prof. Dept. of Computer Science, Seshadripuram Degree College, MysuruWrap-up: CSS Animations are a powerful tool for creating engaging web experiences. By using the ‘animation’ and ‘@keyframes* rules, you can control the animation properties and stages to create the desired effect. With the ability to declare multiple animations, you can create complex and dynamic animations that bring your web pages to life. CSS Transitions CSS transitions allow you to animate changes in CSS property values smoothly over a specified duration. They make it possible to create dynamic, interactive user interfaces that respond to user actions and events. Adding a Transition To add a transition to an element, you need to define the property you want to animate and set a duration for the animation. Here is the basic syntax: selector { transition: property duration; For example, to create a transition for the background color property with a duration of 1 second, you would use the following CSS: div { background-color: red; transition: background-color 1s; Transitions in Detail A transition consists of two states: the initial state and the final state. The initial state is the state of the element before the transition starts, and the final state is the state of the element after the transition ends. During the transition, the browser calculates intermediate states based on the ‘specified duration and the timing function, which controls the speed and acceleration of the animation. Tejaswi S, Asst. Prof. Dept. of Computer Science, Seshadripuram Degree College, MysuruBy default, a transition occurs when the property value changes, but you can use the “transition-property’ property to specify which properties should be animated. The ‘transition-delay’ property allows you to delay the start of the transition, while the “transition-timing-function’ property lets you specify a custom timing function for the animation. The Longhand Properties In CSS, longhand properties refer to individual properties that can be used to specify various aspects of an element's styling. Unlike shorthand properties, longhand properties specify a single aspect of the style, such as font-size or border-color, and must be declared individually. Some examples of commonly used longhand properties in CSS include: ‘font-size’: sets the size of the font for text content, ‘line-height’: sets the vertical space between lines of text. ‘color’: sets the color of text content. “border-color”: sets the color of a border around an element. ‘padding-top’, ‘padding-right’, ‘padding-bottom’, ‘padding-left’: sets the padding (the space between an element's content and its border) for each side of an element individually. - "margin-top", ‘margin-right’, “margin-bottom’, ‘margin-left’: sets the margin (the space between an element and its surroundings) for each side of an element individually. - ‘background-color’: sets the background color of an element. Longhand properties provide greater control and precision over an element's styling, and can be useful in situations where you need to specify a particular aspect of the style independently from the others. They also allow for greater specificity and can make your CSS code more readable and organized. However, they can be more verbose than shorthand properties, which can make your code longer and harder to read if used excessively. The Shorthand Properties In CSS, shorthand properties are used to simplify the syntax of style declarations by allowing multiple related properties to be specified with a single property. For example, instead of specifying the ‘border-top-style’, ‘border-right-style’, *border-bottom-style’, and "border-left-style’ properties separately, you can use the “border-style” shorthand property to specify them all in one line: Tejaswi S, Asst. Prof. Dept. of Computer Science, Seshadripuram Degree College, Mysuruborder-style: solid; In addition to "border-style", there are several other shorthand properties in CSS that allow you to specify multiple related properties in a single declaration, including: ~ ‘background’: sets all background properties (e.g. ‘background-color’, “background-image etc.) in one declaration. - font’: sets all font properties (e.g. ‘font-size’, ‘font-family’, etc.) in one declaration - ‘margin’: sets all margin properties (e.g. ‘margin-top’, “margin-right’, etc.) in one declaration. - ‘padding’: sets all padding properties (e.g. ‘padding-top’, ‘padding-right’, ete.) in one declaration. Using shorthand properties can make your CSS code shorter, more concise, and easier to read and maintain. However, it's important to keep in mind that shorthand properties may override individual properties specified elsewhere in your code, so be careful when using them Longhand Properties vs Shorthand Properties Using shorthand properties for transitions can make your code more concise and easier to read, but it can also make it harder to understand the specifics of the transition. Using longhand properties, on the other hand, can give you more control over each aspect of the transition, but it can also result in more verbose code. OR In CSS, there are two ways to define a set of CSS properties: longhand and shorthand Longhand properties refer to the individual CSS properties that can be defined separately, such as font-size, font-weight, line-height, margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom, and padding-left, These properties can be defined individually and offer more precise control over the styling of an element. For example, you can define the font-size and font-weight separately to create a unique text style for an element. Shorthand properties, on the other hand, allow you to define multiple properties using a single line of code. For example, instead of defining margin-top, margin-right, Tejaswi S, Asst. Prof. Dept. of Computer Science, Seshadripuram Degree College, Mysurumargin-bottom, and margin-left separately, you can use the shorthand property margin to define all four values at once. Shorthand properties are often used to save time and reduce the amount of code needed to define a set of properties While shorthand properties can be more efficient, they can also be more difficult to read and understand. Longhand properties offer more control and clarity, but can result in more verbose code. When deciding whether to use shorthand or longhand properties, it's important to consider the specific situation and the level of control you need over the styling of your element. Working with Multiple Transitions You can use multiple transitions on a single element to create complex animations. When multiple transitions are defined, they are executed in the order they are listed Here is an example of using multiple transitions: div { background-color: red; transition: background-color 1s, border-radius 2s; » In this example, the background color transition will occur first and take 1 second to complete, followed by the border radius transition, which will take 2 seconds to complete. You can also use different timing functions for each transition to create more complex animations. HTMLS: SVG (Scalable Vector Graphics) is a vector image format used for displaying graphics on the web. SVG images are XML-based and can be manipulated with CSS and JavaScript. Here are some ways to view and embed SVG files in HTMLS, as. well as some examples of basic SVG shapes: Viewing SVG Files: SVG files can be viewed in any modem web browser, including Google Chrome, Mozilla Firefox, Apple Safari, and Microsoft Edge. Simply open the SVG file in the browser, and it should be displayed correctly. Tejaswi S, Asst. Prof. Dept. of Computer Science, Seshadripuram Degree College, MysuruEmbedding SVG in HTMLS5: ‘To embed an SVG file in an HTMLS document, you can use the

SVG Example