<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>What are transition?</title>
</head>
<body>
<h1 class="heading without">Without Transition</h1>
<br><br>
<h1 class="heading with">With Transition</h1>
</body>
</html>
.heading
{
color: darkblue;
font-size: 30px;
}
.heading:hover
{
color: aqua;
font-size: 50px;
}
/* ------------------------------------------- */
.with
{
transition: all 0.5s;
}
// https://scrimba.com/learn/cssanimations
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.