אנימציות במעבר עכבר (עם הדרגה)

על מנת לייצר אנימציות במעבר עכבר, יש להגדיר את האנימציה (מה קורה במצב של Hover) ואת המצב הרגיל, ואז להגדיר הדרגה באנימציה.

אם כן, נבחר את הפריט ע"י סלקטור של CSS, לדוגמא:

.galleriesbox img.animated.none

ונגדיר עבורו את האנימציה, למשל הגדלה או הקטנה (Scale) כתלות במצב ה-hover:

.galleriesbox img.animated.none:hover {
 -webkit-transform: scale(1.03);
 -moz-transform: scale(1.03);
 -o-transform: scale(1.03);
 transform: scale(1.03);
}
.galleriesbox img.animated.none {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}

אפשר גם להגדיר אנימציות תנועה או סיבוב, כפי שאפשר לראות ברפרנס הזה של W3C.

בנוסף, נגדיר את ההדרגה ונבחר זמן ביצוע לאנימציה, ל-2 המצבים. כך:

.galleriesbox img.animated.none:hover, .galleriesbox img.animated.none {
 -webkit-transition: all .3s ease-in-out;
 transition: all .3s ease-in-out;
}

אנימציה של תמונה שעולה טיפה למעלה במעבר עכבר:

.hovup:hover {
  transform: translatey(-5px);
}
.hovup:hover, .hovup {
 -webkit-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}