!!! Listing 1: Zwei Übergänge
div#anim {
margin: 50px;
border: 1px solid #333;
padding: 10px;
width: 250px;
color: #fff;
-webkit-transition: color 2s ease 0s, width 4s ease-in-out 0s;
-moz-transition: color 2s ease 0s, width 4s ease-in-out 0s;
-ms-transition: color 2s ease 0s, width 4s ease-in-out 0s;
-o-transition: color 2s ease 0s, width 4s ease-in-out 0s;
transition: color 2s ease 0s, width 4s ease-in-out 0s;
}
div#anim:hover {
color: #000;
width: 400px;
}
!!! Listing 2: Animation: erst einblenden, danach kippen
div#turnfade {
margin: 50px;
border: 1px solid #333;
padding: 10px;
-webkit-animation: reveal 7s forwards;
-moz-animation: reveal 7s forwards;
-ms-animation: reveal 7s forwards;
-o-animation: reveal 7s forwards;
animation: reveal 7s forwards;
}
@-webkit-keyframes reveal {
0% {
opacity: 0;
}
75% {
opacity: 0.75;
-webkit-transform: rotate(0deg);
}
100% {
opacity: 1;
-webkit-transform: rotate(45deg);
}
}
@-moz-keyframes reveal {
0% {
opacity: 0;
}
75% {
opacity: 0.75;
-moz-transform: rotate(0deg);
}
100% {
opacity: 1;
-moz-transform: rotate(45deg);
}
}
@-ms-keyframes reveal {
0% {
opacity: 0;
}
75% {
opacity: 0.75;
-ms-transform: rotate(0deg);
}
100% {
opacity: 1;
-ms-transform: rotate(45deg);
}
}
@-o-keyframes reveal {
0% {
opacity: 0;
}
75% {
opacity: 0.75;
-o-transform: rotate(0deg);
}
100% {
opacity: 1;
-o-transform: rotate(45deg);
}
}
@keyframes reveal {
0% {
opacity: 0;
}
75% {
opacity: 0.75;
transform: rotate(0deg);
}
100% {
opacity: 1;
transform: rotate(45deg);
}
}
!!! Listing 3: Würfel mit Transformationen
1
2
3
4
5 HTML5 Cube
6
151
152
153
154
155
156
157
158
159
160