Spear — Learn to Code

Docs/CSS/Transitions

CSS Transitions

transition: property duration timing-function delay

Timing Functions

ease — default, pelan-cepat-pelan
linear — kecepatan konstan
ease-in — mulai pelan
ease-out — akhir pelan
ease-in-out — pelan di awal dan akhir
cubic-bezier() — custom

style.css

.hover-btn {
  padding:16px 32px;
  background:#6DD5C4;
  color:white;
  border:none;
  border-radius:12px;
  font-weight:bold;
  font-size:16px;
  cursor:pointer;
  transition:all 0.3s ease;
}
.hover-btn:hover {
  background:#7EB8F0;
  transform:translateY(-4px);
  box-shadow:0 10px 25px rgba(126,184,240,0.4);
}

← Previous

Transform

Animations