בפוסט הקודם דיברתי על אנימציות בכללי וגם הצגתי דוגמה של שינוי צבע הרקע באנימציות. הפוסט הזה ובפוסטים הבאים אני פשוט אציג דוגמאות ספציפיות והסבר לכל דוגמה. אנסה להיות כמה שיותר ברור ומובן לכם כי זהו נושא חשוב שכדאי ללמוד היטב, גם לי התחום הזה חדש יחסית אז אני מקווה שזה שהתוכן יועבר מספיק טוב. אם לא אשמח אם תאירו את עיניי.
איך להזיז אובייקט באנימציה ב CSS ?
זה פשוט, קודם כל נגדיר את האובייקט של DIV שעליו נבצע את הניסויים :).
על האובייקט הזה אנחנו נשים את מאפיין האנימציות
div {
width: 200px;
height: 200px;
position: relative;
animation-name: myAnime;
animation-duration: 2s;
animation-iteration-count: infinite;
}
עכשיו נשים את החוקיות שלמדנו בפוסט הקודם:
@keyframes myAnime {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
הדגשתי את הנושא של ה position . כי בלי זה אי אפשר לשלוט במיקום. אני מציע שתשחקו קצת עם הקוד ונתסו לשים ערכים ומאפיינים אחרים (left, right, top . bottom).
התוצאה היא כזו (הגיף עושה את זה גרוע... במציאות זה זז חלק):
להלן כל הקוד למי שצריך:
<!DOCTYPE html>
<html>
<head>
<title>קידוד ואנימציות</title>
<style>
div {
width: 200px;
height: 200px;
background-color: #23f2ff ;
position: relative;
animation-name: myAnime;
-webkit-animation-name: myAnime;
animation-duration: 5s;
-webkit-animation-duration: 5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@keyframes myAnime {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
@-webkit-keyframes myAnime {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
התנועה שהאובייקט עושה היא ישרה\ריבועית. אם אתם רוצים לגרום לאובייקט לנוע בצור מעגלית זה אפשרי. כנסו וצפו בפוסט הזה.
יש לך מה להגיד? אשמח לתגובה