主要有transform, transform-origin, transition和animation效果。
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Animation</title>
<style type="text/css">
* {
font-family: verdana;
}
h1 {
font-size: 18px;
}
h3 {
font-size: 14px;
}
.title {
clear: both;
margin-top: 10px;
border-top: 1px dashed #CCC;
}
.transform {
float: left;
position: relative;
margin: 10px;
width: 200px;
height: 200px;
border: 1px solid #AAA;
}
.transform h1, .transform h3{
text-align: center;
}
.transform .block {
position: absolute;
top: 80px;
left: 70px;
width: 50px;
height: 50px;
border: 1px solid #FFF;
filter: Alpha(opacity=70);
color: #FFF;
background-color: #335C85;
background-color: rgba(51, 92, 133, 0.7);
}
.transform .rotate {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.transform .scale {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
top: 120px;
left: 110px;
}
.transform .translate {
-webkit-transform: translate(10px, 20px);
-moz-transform: translate(10px, 20px);
-o-transform: translate(10px, 20px);
transform: translate(10px, 20px);
}
.transform .skew {
-webkit-transform: skew(30deg, -10deg);
-moz-transform: skew(30deg, -10deg);
-o-transform: skew(30deg, -10deg);
transform: skew(30deg, -10deg);
}
.transform .matrix {
-webkit-transform:matrix(1, 0.5, 0.5, 1, 30, 30);
-moz-transform:matrix(1, 0.5, 0.5, 1, 30px, 30px);
-o-transform:matrix(1, 0.5, 0.5, 1, 30, 30);
transform:matrix(1, 0.5, 0.5, 1, 30, 30);
}
.transform .transform-origin {
-webkit-transform-origin: 10% 10%;
-moz-transform-origin: 10% 10%;
-o-transform-origin: 10% 10%;
transform-origin: 10% 10%;
}
.transform div:hover.transition {
background-color: #B2C6D8;
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s;
-webkit-transition-function: ease-in;
-webkit-transition-delay: 1s;
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
-moz-transition-function: ease-in;
-moz-transition-delay: 1s;
}
@-webkit-keyframes myanimation {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.transform .animation {
-webkit-animation-name: myanimation;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 200ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-play-state: running;
-moz-animation-name: myanimation;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 200ms;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-play-state: running;
-o-animation-name: myanimation;
-o-animation-duration: 1s;
-o-animation-timing-function: linear;
-o-animation-delay: 200ms;
-o-animation-iteration-count: infinite;
-o-animation-direction: normal;
-o-animation-play-state: running;
animation-name: myanimation;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 200ms;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running;
}
</style>
</head>
<body>
<div class="title"><h1>transform</h1></div>
<div class="transform">
<h1>transform rotate</h1>
<div class="block"></div>
<div class="block rotate"></div>
</div>
<div class="transform">
<h1>transform scale</h1>
<div class="block"></div>
<div class="block scale"></div>
</div>
<div class="transform">
<h1>transform translate</h1>
<div class="block"></div>
<div class="block translate"></div>
</div>
<div class="transform">
<h1>transform skew</h1>
<div class="block"></div>
<div class="block skew"></div>
</div>
<div class="title"><h1>transform-origin</h1></div>
<div class="transform">
<h1>transform-origin</h1>
<div class="block"></div>
<div class="block transform-origin rotate"></div>
</div>
<div class="title"><h1>transition</h1></div>
<div class="transform">
<h1>transition</h1>
<h3>mouseover for transition</h3>
<div class="block transition"></div>
</div>
<div class="title"><h1>animation</h1></div>
<div class="transform">
<h1>transition</h1>
<div class="block animation">Animation</div>
</div>
</body>
</html>