przykład 1
<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>
.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%; }
linear
ease
ease-in
ease-out
ease-in-out
steps
cubic
przykład 2
<div class="item-1"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... </p> </div>
.item-1 { background-color: #289DCC; color: white; transition: background-color 1000ms linear, color 700ms linear; } .item-1:hover { background-color: orangered; color: black; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis adipisci temporibus, dolorum quos. Culpa minus dignissimos, quas alias quos at facere eaque hic amet quae, atque.
przykład 3
<div class="item-2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... </p></div>
.item-2 { transition: all 0.3s ease; } .item-2:hover { box-shadow: inset 0 0 0 25px #f78de7; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis adipisci temporibus, dolorum quos. Culpa minus dignissimos, quas alias quos at facere eaque hic amet quae, atque.
przykład 4
<div class="item-3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... </p></div>
.item-3 { transition: all 0.3s ease; } .item-3:hover { border-radius: 50%; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis adipisci temporibus, dolorum quos. Culpa minus dignissimos, quas alias quos at facere eaque hic amet quae, atque.