‘ A’

Project Report

On

“Create a simple animation in CSS”

Submitted & Present in the fulfillment of the
requirement for the award of
Diploma In Information Technology By

1. Mr.Bankar Omkar Arjun

2. Mr.Kulkarni Chaitanya Umesh

3. Mr.Khilare Pratik Balasaheb

Under the Guidance of

Ms.Jadhav C.P

DEPARTMENT OF INFORMATIONTECHNOLOGY

NEW SATARA COLLEGE OF ENGINEERING & MANAGEMENT

POLY(2023-2024
NEW SATARA COLLEGE OF ENGINEETING AND MANAGEMENT KORTI-
PANDARPUR

certificate

This is to certify that the project “Create a simple animation in CSS”

has been presented successfully and submitted by.

Name of the Student.

1. Mr.Bankar Omkar Arjun

2. Mr.Kulkarni Chaitanya Umesh

3. Mr.Khilare Pratik Balasaheb

Exam Seat No: - ( )

Student of Information Technologi(IF) class in the fulfillment For the

award of Diploma in Information Technology Engineering as per curriculum
laid by Maharashtra State Board Of Technical Education, Mumbai during the
academic year 2023-2024.

Project Guide H.O.D Principal

( Ms.Jadhav C.P) (Prof. Puri S.B.) (Prof.Londhe.V.H.)
 Declaration
We hereby declare that the project report “Create a simple animation in CSS” is
completed and submitted by me for the award of diploma engineering in,
NSCOEM, College, Korti, Pandarpur.
The partial fulfillment of the requirement for the award of the diploma of
INFORMATION TECHNOLOGY is a project work carried out by me under
the guidance of Ms.Jadhav C.P further declare that the work reported in this
project has not submitted and will not be submitted, either in part or full, for
the award of diploma engineering in Information Technologi this institute or
any other university or examination body.

PLACE- KORTI,
PANDARPUR-

DATE-
 Acknowledgement

I hereby declare that the work presented in this Mini project report entitled,
“Create a simple animation in CSS” in partial fulfillment for the Diploma of "
INFORMATION TECHNOLOGY " in Our extreme gratitude Ms.Jadhav C.P who
guided us throughout the project. Without his willing disposition, spirit of
accommodation, frankness, timely clarification and above all faith in us, this
project could not have been completed in due time.

Project student name

1. Mr.Bankar Omkar Arjun

2. Mr.Kulkarni Chaitanya Umesh

3. Mr.Khilare Pratik Balasaheb

 Abstraction

Is web based application for Music evaluation. Online

Music Player System not only web app between sing a Song
With Your Felling.. It fulfills the requirements of the User to
Sing the Songs online. User’s can Sing Song without the need of
gose to any Third Party Website.

They can view the result at the same time. Thus the purpose
of the site is to provide a system that saves the efforts
 INDEX

Sr.No Content Page No

1. Introduction 1

2. History 2

3. Properties of animation 3

4. Browser Support 4

5. Example and output 6

6. Conclusion 8

7. Reference 10
 1.Introduction

An animation lets an element gradually change from one style to another. You can
change as many CSS properties you want, as many times as you want.

To use CSS animation, you must first specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.

An animation lets an element gradually change from one style to another.You can
change as many CSS properties you want, as many times as you want.To use CSS
animation, you must first specify some keyframes for the animation

Keyframes hold what styles the element will have at certain times.
 2.History

While the pseudo-class :hover has been used to generate rudimentary animations
for years, extensions of CSS into the realm of animation were minimal until the
late 2000s decade. As early as 2007, WebKit had announced its intent to include
CSS animation, transitions, and transforms as features of WebKit. It also
announced the implementation of both implicit and explicit animation through CSS
in February 2009. CSS animation has also been put forth as a feature of CSS3, the
ongoing draft specification managed by the World Wide Web .
 3. Properties of animation

 @keyframes
 animation-name
 animation-duration
 animation-delay
 animation-iteration-count
 animation-direction
 animation-timing-function
 animation-fill-mode
 animation
 4.Browser Support

Google Mozilla Microsoft

Property Opera Vivaldi
Chrome Firefox Edge

@keyframes 43.0 10.0 16.0 9.0 30.0

animation-name 43.0 10.0 16.0 9.0 30.0

animation-duration 43.0 10.0 16.0 9.0 30.0

animation-delay 43.0 10.0 16.0 9.0 30.0

animation-iteration- 43.0 10.0 16.0 9.0 30.0

count

animation-direction 43.0 10.0 16.0 9.0 30.0

animation-timing- 43.0 10.0 16.0 9.0 30.0

function

animation-fill-mode 43.0 10.0 16.0 9.0 30.0

animation 43.0 10.0 16.0 9.0 30.0

 5.Example and output
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>
 6.Conclusion

By leveraging CSS properties such as @keyframes, transition, and transform,

developers can manipulate various elements, from simple transitions and
transformations to complex animations.
 7.References
www.google.com

www.css animation property.com

www.css animation Wikipedia.com