אנימציות ב CSS3

ניתן לקרא גם את המדריך הקודם אנימציות ב CSS3 חלק א

אחת הבשורות ש css3 הביא לנו זה אנימציות, אם עד היום נצרכנו ל JS כדי לעשות אנימציות. CSS3 מציע אנימציות בקלות.

יש לציין שהאנימציות נתמכות בדפדפנים: Chrome, Safari, FireFox, Opera וחלקית ב-IE9.

See the Pen CSS3 animated weather icons by Lennart Hase (@motorlatitude) on CodePen.

דבר ראשון נכיר את @keyframes

את קוד האנימציה רושמים תחת @keyframes כך: (מזכיר קצת את media-query)


<style>

@keyframes animation_name {

    from {background-color: blue;}
    to {background-color: red;}

}


div {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation-name: animation_name;
    animation-duration: 5s;
} 

</style>


<div></div>

אחרי keyframes רושמים שם שאנחנו בוחרים לאנימציה והיא תפעל על האלמנט שבו נשים בסטייל את התגית animation-name והשם שבחרנו.

בדוגמא למעלה אנחנו מפעילים על ה div אנימציה שאורכת 5 שניות שבמהלכה אנחנו משנים את הרקע מכחול לאדום אפשר לשנות כל דבר מיקום, גובה, רוחב וכו..

וזה נראה ככה..

See the Pen QKPzdG by josef arazi (@shiran) on CodePen.

 

animation-iteration-count

הפרמטר הזה מקבל מספר ובו מספר הפעמים שתבוצע האנימציה, הוא נרשם בתוך הסטייל של האלמנט שעליו רוצים לעשות את האנימציה.

ניתן גם לקבוע שהאנימציה תמשך עד אינסוף :

animation-iteration-count: infinite;

ניתן לגרום לאנימציה לפעול רק בעת מעבר

div:hover {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: animatuin_name;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

אפשר לקבוע מה קורה בכל שלב באנימציה באחוזים

@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

להשים לב: בכל שלב שינינו כמה מאפיינים.

animation-timing-function

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

ease – האנימציה מתחילה לאט אחר כך מהר ובסוף שוב פעם לאט ( ברירת המחדל אם לא נבחר)
linear – האנימציה באותו הקצב גם בהתחלה וגם בסוף.
ease-in – מתחיל ואחר כך ממשיך מהר עד הסוף.
ease-out – מתחיל מהר ואחר כך מאט עד הסוף.
ease-in-out – מאט רק בהתחלה ובסוף.
cubic-bezier(n,n,n,n) – מאפשר להכניס ערכים שמגדירים את מהירות האנימציה.

animation-delay

מגדיר השהייה לאנימציה כלומר שתתחיל רק בעוד זמן מסויים, גם נרשם בסטייל של האלמנט.

דוגמא:

animation-delay: 2s;