Scribd
Upload
4 views1 page

Transition

The document is an HTML page demonstrating the CSS transition-timing-function property. It features five div elements that change width when hovered over, showcasing different speed curves: linear, ease, ease-in, ease-out, and ease-in-out. The transitions are set to occur over two seconds.

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
4 views1 page

Transition

The document is an HTML page demonstrating the CSS transition-timing-function property. It features five div elements that change width when hovered over, showcasing different speed curves: linear, ease, ease-in, ease-out, and ease-in-out. The transitions are set to occur over two seconds.

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: 100px;
background: violet;
transition: width 2s;
}

#div1 {transition-timing-function: linear;}


#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

div:hover {
width: 300px;
}
</style>
</head>

<body>
<h1>The Transition-timing-function Property</h1>
<p>Hover over the div elements below, to see the different speed curves:</p>

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

</body>
</html>

You might also like