Scribd
Upload
32 views6 pages

Transitions

CSS transitions allow smooth property value changes over a specified duration. To create a transition, the property being transitioned (e.g. width) and the duration must be defined. Transition timing functions like ease provide options to control the speed of the transition between states. Multiple properties and transitions can be combined to create complex interactive effects.

Uploaded by

Luna Walker
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
32 views6 pages

Transitions

CSS transitions allow smooth property value changes over a specified duration. To create a transition, the property being transitioned (e.g. width) and the duration must be defined. Transition timing functions like ease provide options to control the speed of the transition between states. Multiple properties and transitions can be combined to create complex interactive effects.

Uploaded by

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

Transitions

CSS transitions allows you to change property values smoothly, over a given duration.

To create a transition effect, it specified two things:

 the CSS property want to effect (width, height)


 the duration of the effect

If the duration part is not specified, the transition will have no effect, because the default value is 0.

<!DOCTYPE html><!-- change width -->


<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

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

<h1>The transition Property</h1>


<div></div>

</body>
</html>
<!DOCTYPE html><!-- change width and height -->
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}

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

<h1>The transition Property</h1>


<div></div>

</body>
</html>

Transition-timing-function
ease - slow start, then fast, then end slowly (this is default)
linear - same speed from start to end
ease-in - transition effect with a slow start
ease-out - transition effect with a slow end
ease-in-out - transition effect with a slow start and end
cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
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>
<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>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
div:hover {
width:300px;
}
</style>
</head>
<body>

<h1>The cubic-bezier() Function</h1>

<div></div>

</body>
</html>

Delay the Transition Effect


The transition-delay property specifies a delay (in seconds) for the transition effect.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 3s;
transition-delay: 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition-delay Property</h1>
<div></div>
</body>
</html>

Transition + Transformation
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
}

div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}
</style>
</head>
<body>
<h1>Transition + Transform</h1>

<div></div>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition Properties Specified One by One</h1>
<div></div>
</body>
</html>

You might also like