MULTIMEDIA AND ANIMATION SECOND INTERNAL EXAM(22-07-2024)

 SUJALADITZ

MUTIMEDIA AND ANIMATION QUESTION AND ANSWERS:-

Answer any five questions (5 x 2 = 10)

a. What is Animation? 

A:-Animation is a technique that creates the illusion of movement by displaying a sequence of images or frames in rapid succession. It is used extensively in multimedia to bring graphics, text, and images to life, enhancing the visual experience and making content more engaging and dynamic.

b. What is the delay of an animation? 

A:-The delay of an animation refers to the time interval between the moment an animation is applied to an element and the moment it begins to play. In CSS, this can be set using the animation-delay property, which can take values in seconds (s) or milliseconds (ms).

c. What is the animation-direction property?

A:-The animation-direction property in CSS specifies whether an animation should play forwards, backwards, or in alternate cycles. Its possible values are:

• normal: The animation plays as normal.

• reverse: The animation plays in reverse direction.

• alternate: The animation alternates between normal and reverse on each cycle.

• alternate-reverse: The animation alternates, starting in reverse direction.

d. What is the animation-timing-function property? 

A:-The animation-timing-function property in CSS defines the speed curve of the animation. It allows you to control the pace of the animation over its duration. Common values include:

• normal: The animation plays as normal.

• reverse: The animation plays in reverse direction.

• alternate: The animation alternates between normal and reverse on each cycle.

• alternate-reverse: The animation alternates, starting in reverse direction.

d. What is the animation-timing-function property? 

A:-The animation-timing-function property ine of the animation. It allows you to control the pace of the animation over its duration. Common values include:

• linear: The animation has the same speed from start to end.

• ease: The animation starts slow, speeds up, and then slows down at the end.

• ease-in: The animation starts slowly.

• ease-out: The animation ends slowly.

• ease-in-out: The animation starts and ends slowly.

• cubic-bezier(n,n,n,n): Defines your own values in a cubic-bezier function.

• e. How to use CSS transitions. What is longhand and shorthand CSS?

  • Longhand CSS involves specifying each property individually. For example:

    css
    
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0.5s;
    

  • Shorthand CSS allows you to combine multiple properties into one declaration. For example:

    css
    transition: width 2s ease-in-out 0.5s;

  g. What is SVG?  A:- SVG (Scalable Vector Graphics) is an XML-based vector image format for two-dimensional graphics. Unlike raster images, SVG images can be scaled up or down without losing quality, making them ideal for web use. SVG is used for defining graphics for the web and can be easily manipulated with CSS and JavaScript.

  Answer any two questions (2 x 5 = 10)

  a. What is the keyframes rule? Explain with an example. The @keyframes rule in CSS is used to define the keyframes for an animation. Keyframes specify the styles that an element will have at certain times during the animation sequence.

  Example:

  css
  
  @keyframes example {
    0% { background-color: red; left: 0px; }
    50% { background-color: yellow; left: 200px; }
    100% { background-color: green; left: 400px; }
  }
  
  div {
    width: 100px;
    height: 100px;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
  }
  

  In this example, the div element will change its background color and move from left to right over 4 seconds.

  b. What are SVG shapes and explain any one with an example. SVG shapes are the basic geometric forms used to create vector graphics in SVG. Common shapes include rect (rectangle), circle, ellipse, line, polyline, and polygon.

  Example - Circle:

  html
  
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
  

  This example creates a red circle with a black border. The cx and cy attributes define the center of the circle, while the r attribute defines the radius.

  c. Explain the speed curve of the animation with an example. 

  Example:

  css
  
  @keyframes example {
    from { left: 0px; }
    to { left: 200px; }
  }
  
  div {
    width: 50px;
    height: 50px;
    position: relative;
    background-color: blue;
    animation: example 2s ease-in-out;
  }
  

  The speed curve of an animation, defined by the animation-timing-function property, determines how the intermediate states of the animation are calculated. It controls the acceleration and deceleration of the animation.

• 
  

  EXAM OVER....

  BEST OF LUCK GUYS.

  
  

  CREATED AND PUBLISHED BY:-SUJAL.S.RAJAMANI.