אנימציית CSS לוורדפרס

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

דוגמא 1
דוגמא 2
דוגמא 3
דוגמא 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);
}

בדוק גם

וורדפרס

מצגת מדהימה על היכולות של HTML5 ו JS

http://bartaz.github.io/impress.js/#/bored

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *