יוצרים אנימציה בקלות עם CSS3

11673
06-03-2014

מנשמע בוני אתרים יקרים? היום אני שמח להציג בפניכם אוסף אפקטים מדליקים (ואת הקוד שלהם) אשר ניצור בעזרת CSS3! נכון שיש עניין של אילו דפדפנים תומכים בCSS3 אבל כל הגדולים כבר מזמן תומכים ומי שלא פשוט לא יראה את האפקט. חצי נחמה ניתן למצוא בעבודה שלמבוגרים אשר לא מעדכנים את הדפדפנים שלהם יש לרוב ילדים אשר עושים זאת בצורה סדירה.

איך המאמר בנוי?

דוגמה חיה ומדליקה
קוד CSS וHTML של הדוגמה
אתם אוהבים ומפרגנים עם LIKE!

מבינים את הרעיון של keyframes

חשוב להבין ש…

יצירה של אנימציות בעזרת CSS3 הוא לא עניין מסובך. אנחנו צריכים ליצור נעשות בעזרת keyframes ואפקטים של CSS.

כמו תמיד אין תחליף לתמונה.

שימו לב

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

קוד CSS +

[css] .fadeIn{

// סוג האנימציה animation-name: fadeIn; -webkit-animation-name: fadeIn;

// כמה זמן להריץ את האנימציה animation-duration: 2s; -webkit-animation-duration: 2s;

// סוג אפקט מעבר animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out;

// מצב תצוגה visibility: visible !important; }

@keyframes fadeIn { 0% {opacity: 0.0;} 25% {opacity: 0.3;} 50% {opacity: 0.5;} 75% {opacity: 0.8;} 100% {opacity: 1;} } [/css]

קוד HTML +

[html] <div class="fadeIn"> <img src="captain-america.png" alt="קפטיין אמריקה" /> </div> [/html]

יוצאים לדרך – אוסף דוגמאות כולל קוד והדגמה

סלייד פנימה!

דוגמה פשוטה של אנימציה בסיסית בעזרת CSS3 אשר עושה סלייד (slide) פנימה מצד שמאל ימינה תוך 2 שניות

קוד CSS +

[css] .slideRight-001{ animation-name: slideRight; -webkit-animation-name: slideRight;

animation-duration: 1s; -webkit-animation-duration: 1s;

animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out;

visibility: visible !important; }

@keyframes slideRight { 0% {transform: translateX(-150%);} 100% {transform: translateX(0%);} }

@-webkit-keyframes slideRight { 0% {-webkit-transform: translateX(-150%);} 100% {-webkit-transform: translateX(0%);} } [/css]

קוד HTML +

[html] <div class="slideRight-001"> <img src="turbo-snail.png" alt="חלזון טורבו" /> </div> [/html]

בארט מרחף

הדגמה מדליקה של אפקט ריחוף בעזרת CSS3 בו בארט במרדף נצחי אחר הדולר הבא! דבר מעניין שכדאי להדגיש הוא שאנימציה זאת נמצאת במצב לופ ועובדת לנצח… אפשר לשלב אלמנטים כאלה בכפתורים, תמונות ועוד… ראו איך שילבתי את זה באתר צמרת הבולות בדף אשר עוסק בהובלת דירה (רמז: כפתור השיתוף)

קוד CSS +

[css] .float-001{ animation-name: float; -webkit-animation-name: float;

animation-duration: 2s; -webkit-animation-duration: 2s;

animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; }

@keyframes float { 0% {transform: translateY(0%);} 50% {transform: translateY(2%);} 100% {transform: translateY(0%);} }

@-webkit-keyframes float { 0% {-webkit-transform: translateY(0%);} 50% {-webkit-transform: translateY(2%);} 100% {-webkit-transform: translateY(0%);} } [/css]

קוד HTML +

[html] <img class="float-001" src="bart.png" /> [/html]

מכשפה בטיסת הבוקר

עוד הדגמה מדליקה של אלמנט הריחוף בצירוף רקע מתחלף מתמשך (אני יודע שיש קפיצה קטנה – עצלנות גרפיקה). הכל זורם נחמד מאוד והכל רק בעזרת CSS! שימו לב שהפעם אנו משתמשים באנמיציית CSS על שני אלמנטים במקביל. אחד הרקע והשני המכשפה אשר טסה לה להנאתה.

קוד CSS +

[css] .witch-001-wrap { position: relative; background:url(clouds-bg.png); height: 250px; width: 1706px;

-webkit-animation: slideskybg 30s linear infinite; -moz-animation: slideskybg 30s linear; animation: slideskybg 30s linear infinite; } @-webkit-keyframes slideskybg{ 0% {background-position: 0 0;} 100% {background-position: -1706px 0;} }

.witch-001-wrap .witchImg{position: absolute; z-index: 10; top: 80px; right: 100px;}

.witch-001{ animation-name: witchfly; -webkit-animation-name: witchfly;

animation-duration: 2s; -webkit-animation-duration: 2s;

animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; }

@keyframes witchfly { 0% {transform: translate(0px, 0px);} 50% {transform: translateY(5px);} 100% {transform: translateY(0px);} }

@-webkit-keyframes witchfly { 0% {-webkit-transform: translateY(0px);} 50% {-webkit-transform: translateY(5px);} 100% {-webkit-transform: translateY(0px);} } [/css]

קוד HTML +

[html] <div class="witch-001-wrap"> <div class="witchImg"><img class="witch-001" src="witch.png" alt="מכשפה" /></div> </div> [/html]

אהבתי שתופס את העין

הפעם, דוגמה פרקטית! כולנו מחפשים דרכים להבליט את כפתור הLLIKE שלנו במיקומים שונים אז הנה דרך פשוטה וקלה בעזרת CSS3 וכמה שורות HTML. קל משקל, מקורי וקל ליישום (אהבתם – תראו את זה).

קוד CSS +

[css] .fblike002 {padding: 8%; z-index: 99; text-align: right; position: relative;} .fblike002Btn {background: #DDD; width: 134px; height: 50px; position: absolute; top: 79px; left: 20%;}

.fblikeimg { animation-name: fblikeimg; -webkit-animation-name: fblikeimg;

animation-duration: 1s; -webkit-animation-duration: 1s;

animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;

animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; }

@keyframes fblikeimg { 0% {transform: scale(1,1);} 25% {transform: scale(1.02,1.02);} 50% {transform: scale(1.04,1.04);} 75% {transform: scale(1.02,1.02);} 100% {transform: scale(1,1);} }

@-webkit-keyframes fblikeimg { 0% {-webkit-transform: scale(1,1);} 25% {-webkit-transform: scale(1.02,1.02);} 50% {-webkit-transform: scale(1.04,1.04);} 75% {-webkit-transform: scale(1.02,1.02);} 100% {-webkit-transform: scale(1,1);} } [/css]

קוד HTML +

[html] <div id="ex003" class="fblike-002"> <div class="fblike002"><img src="https://sagive.co.il/wp-content/uploads/2014/03/facebook-like-002.png" alt="פייסבוק לייק" class="fblikeimg" /></div> <div class="fblike002Btn"><iframe src="//www.facebook.com/plugins/like.php?href='.urlencode(get_permalink()).'&width&layout=box_count&action=like&show_faces=false&share=false&height=65&appId=293887130693080" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:65px;" allowTransparency="true"></iframe></div> </div> [/html]

קופסת טוויטר עם סטייל

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

קוד CSS +

[css] .twitterswing .twitterBtn {position: absolute;top: 70px;right: 5px;}

.twitterswing{ animation-name:twitterswing; -webkit-animation-name:twitterswing;

animation-duration:2.5s; -webkit-animation-duration:2.5s;

animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; }

@keyframes twitterswing{ 0%{transform:rotate(-0.75deg);} 50%{transform:rotate(0.75deg);} 100%{transform:rotate(-0.75deg);} }

@-webkit-keyframes twitterswing{ 0%{-webkit-transform:rotate(-0.75deg);} 50%{-webkit-transform:rotate(0.75deg);} 100%{-webkit-transform:rotate(-0.75deg);} } [/css]

קוד HTML +

[html] <div class="twLikeBox twitterswing relative"> <div class="twitterBtn one"> <a href="https://twitter.com/share" class="twitter-share-button" data-via="sagive">Tweet</a> </div> <img src="https://sagive.co.il/wp-content/uploads/2014/03/share-on-twitter-01.png" alt="Share on Twitter"> </div> [/html]

CSS3: דוגמאות שוות מרשת האינטרנט

ממש על קצה המזלג

אני יכול להמשיך ליצור דוגמאות לנצח… וגם נשמח לשמוע ממכם (השאירו תגובה) על אנימציות מדליקות שעשיתם בעזרת CSS3 ויש בהם שימוש פרקטי באתר שלכם. אני חייב לעצור כאן מטעמי זמן אבל מצרף כאן למטה המון דוגמאות מדליקות של אנימציות אשר נעשו בעזרת CSS3 על ידי בוני אתרים מרחבי הרשת.

כמו תמיד אתם מוזמנים להגיב, לחוות דעת ולחלוק איתנו מידע נוסף. אם אהבתם נודה לכם על פרגון בעזרת כפתור הפייסבוק (כן! אל תתביישו).