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

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

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);
}