Scribd
Upload
18 views1 page

Animation 2

The document is an HTML example demonstrating CSS animations using different timing functions. It includes five div elements, each showcasing a unique animation-timing-function: linear, ease, ease-in, ease-out, and ease-in-out. The animation moves the elements from left to right over a duration of 5 seconds in an infinite loop.

Uploaded by

Maxine
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
18 views1 page

Animation 2

The document is an HTML example demonstrating CSS animations using different timing functions. It includes five div elements, each showcasing a unique animation-timing-function: linear, ease, ease-in, ease-out, and ease-in-out. The animation moves the elements from left to right over a duration of 5 seconds in an infinite loop.

Uploaded by

Maxine
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

<meta name='viewport' content='width=device-width, initial-scale=1'/><!

DOCTYPE
html>
<html>
<head>
<style>
div{
width: 100px;
height: 50px;
background-color:hotpink;
font-weight: bold;
position: relative;
animation: mymove 5s infinite;
}
#div1{animation-timing-function: linear;}
#div2{animation-timing-function: ease;}
#div3{animation-timing-function: ease-in;}
#div4{animation-timing-function: ease out;}
#div5{animation-timing-function: ease-in-out;}

@keyframes mymove{
from{left: 0px;}
to{left: 300px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>
<p> The animation-timing-function property specifies the speed curve of the
animation. The following example shows some of the different speed curves that can
be used</p>

<div id="div1" >linear</div>


<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

You might also like