Transition przykłady

<div class="square s-linear">linear</div>
<div class="square s-ease">ease</div>
<div class="square s-ease-in">ease-in</div>
<div class="square s-ease-out">ease-out</div>
<div class="square s-ease-in-out">ease-in-out</div>
<div class="square s-steps">steps</div>
<div class="square s-cubic">cubic</div>Code language: HTML, XML (xml)

.square {
    background: #289DCC;
    width: 150px;
    max-height: 100px;
    border-radius: 8px;
    text-align: center;
    color: white;
    padding: 8px;
    margin: 0 auto 5px auto;
    transition-property: width;
    transition-duration: 1s;
}

.square.s-linear { transition-timing-function: linear; }
.square.s-ease { transition-timing-function: ease; }
.square.s-ease-in { transition-timing-function: ease-in; }
.square.s-ease-out { transition-timing-function: ease-out; }
.square.s-ease-in-out { transition-timing-function: ease-in-out; }
.square.s-steps { transition-timing-function: steps(3); }
.square.s-cubic { transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }

.square:is(:hover, :focus) { width: 50%; }Code language: CSS (css)

<div class="item-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... </p>
</div>Code language: HTML, XML (xml)

.item-1 {
    background-color: #289DCC;
    color: white;
    transition: background-color 1000ms linear, color 700ms linear;
}

.item-1:hover {
    background-color: orangered;
    color: black;
}Code language: CSS (css)

<div class="item-2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... </p></div>Code language: HTML, XML (xml)

.item-2 {
    transition: all 0.3s ease;
}

.item-2:hover {
    box-shadow: inset 0 0 0 25px #f78de7;
}
Code language: CSS (css)

<div class="item-3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... </p></div>Code language: HTML, XML (xml)

.item-3 {
    transition: all 0.3s ease;
}

.item-3:hover {
    border-radius: 50%;
}Code language: CSS (css)