מגזין וורדפרס אתרים – בקלות ובעברית – WP-Atarim עדכונים, טיפים, חדשות, שירותים ועזרה בוורדפרס
להל”ן כמה דוגמאות לאפשרויות לאנימצייה פשוטה דרך הCSS
כמו שתוכלו לראות אפשר לתכנת אנימציות אלו – בשילוב כל האופציות הנ”ל ובנפרד. זיכרו שלכל משפחת דפדפנים הקוד המתאים לה.
דוגמא 2
דוגמא 4
| box 1 | Translated to the right: -webkit-transform: translate(3em,0); |
| box 2 | Rotated 30 degrees with the clock: -webkit-transform: rotate(30deg); |
| box 3 | Translated to the left and down: -webkit-transform: translate(-3em,1em); |
| box 4 | Scaled to twice its original size: -webkit-transform: scale(2); |
דוגמא לCSS שהשתמשתי בו:
.showbox {
background-color: #FFFFFF;
border: 2px solid green;
float: left;
height: 60px;
line-height: 60px;
margin: 4em 1em;
text-align: center;
width: 100px;
-moz-transition: all 1s ease-in-out 0s;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}
.slideright:hover {
-moz-transform: translate(3em, 0pt);
-webkit-transform: translate(3em, 0pt);
-o-transform: translate(3em, 0pt);
-ms-transform: translate(3em, 0pt);
}
.rotate:hover {
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
}
.slideleft:hover {
-moz-transform: translate(-3em, 1em);
-webkit-transform: translate(-3em, 1em);
-o-transform: translate(-3em, 1em);
-ms-transform: translate(-3em, 1em);
}
.scale:hover {
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
}
