🎞️ 8) CSS Transitions — מעבר חלק בין מצבים

מה זה transition?

Transition מאפשר לשנות מאפייני CSS בהדרגה בין שני מצבים (למשל מצב רגיל ↔ מצב :hover) לאורך זמן. כך נוצרת אנימציה קצרה בלי צורך ב־keyframes.

מעבר צבע חלק בעת ריחוף (hover).

/* HTML */
<button class="btn-demo">css transition</button>

/* CSS בסיסי */
.btn-demo{
  height: 54px;
  min-width: 220px;
  padding: 0 .75rem;
  font-weight: 600;
  color: #fff;
  background: royalblue;
  border: none;
  border-radius: .6rem;
  transition-property: background-color, transform; /* מה משתנה */
  transition-duration: .8s;                        /* כמה זמן */
  transition-timing-function: ease;                /* עקומה */
}
.btn-demo:hover{
  background: gold;
  color: #111;
  transform: translateY(-2px);
}

דמו מהיר: scale / translate / rotate / skew

לכל קובייה יש transition: transform 1s, והמצב :hover משנה את transform.

scale me

translate me

rotate me

skew me

Transform-origin — דוגמאות

רחפו עם העכבר על כל אריח כדי לראות את ההבדל. לכל קופסה יש transition: transform 1s ועל :hover היא עושה transform: rotate(30deg); נקודת הסיבוב משתנה לפי transform-origin.

transform-origin: center — origin: **center**

transform-origin: top left — origin: **top left**

transform-origin: bottom right — origin: **bottom right**

transform-origin: 30% 20% — origin: **30% 20%**

סוגי מעבר (transition-timing-function)

linear

ease

ease-in

ease-out

ease-in-out

cubic-bezier(.4,0,.2,1)

דוגמת Loader (keyframes) — משולשים מסתובבים

כאן זה כבר animation עם @keyframes (לולאה אינסופית). Transitions בין שני מצבים, לאנימציות מורכבות יותר עדיף keyframes.

.kinetic{ position:relative; width:80px; height:80px; }
.kinetic::after,.kinetic::before{
  content:""; position:absolute; top:0; left:0; width:0; height:0;
  border:50px solid transparent; border-bottom-color:#111; /* משולש */
  animation: rotateA 2s linear infinite .5s;
}
.kinetic::before{ transform: rotate(90deg); animation: rotateB 2s linear infinite; }

@keyframes rotateA{
  0%,25%{ transform: rotate(0deg); }
  50%,75%{ transform: rotate(180deg); }
  100%{ transform: rotate(360deg); }
}
@keyframes rotateB{
  0%,25%{ transform: rotate(90deg); }
  50%,75%{ transform: rotate(270deg); }
  100%{ transform: rotate(450deg); }
}

קיצור: `transition`

התחביר: transition: property duration timing-function delay.

.card{
  transition: transform .6s ease, opacity .3s linear .15s;
}
.card:hover{
  transform: translateY(-6px) scale(1.02);
  opacity: .95;
}