אנימציית 'נשימה' לאלמנטים | הנפשת אלמנט גדל וקטן אוטומטית

לפעמים נרצה למשוך את עין הגולש אל אלמנט מסויים בעמוד או ליצור תחושה השראתית ומרגיעה. 

על מנת לבצע זאת נוכל להשתמש באנימציית הנפשה בקצב נשימה.

נשים את קוד ה-CSS הבא תחת מתקדם > CSS מותאם באלמנט שבו נרצה שתחול האנימציה.

				
					selector {
    animation: breathing 4s ease-in-out infinite;
}

@keyframes breathing {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
				
			

והנה התוצאה:

בהצלחה!