这是一个比较简单的小例子，实现如图效果
仅仅用css3就可以达到这种效果，代码如下：
.div {
position: relative;
top: 20px;
height: 300px;
width: 200px;
margin: 0 auto;
background: blue;
float: left;
margin-left: 20px;
}
.div2 {
position: relative;
top: 30px;
height: 300px;
width: 200px;
margin: 0 auto;
background: red;
float: left;
margin-left: 20px;
}
.fadeInLeft {
animation: fadeInLeft;
}
.fadeInDown {
animation: fadeInDown;
}
.fadeInUp {
animation: fadeInUp;
}
.fadeInRight {
animation: fadeInRight;
}
.OneAnimated {
animation-duration: 0.5s;
animation-fill-mode: both;
}
.TwoAnimated {
animation-duration: 1s;
animation-fill-mode: both;
}
.ThreeAnimated {
animation-duration: 1.5s;
animation-fill-mode: both;
}
.FourAnimated {
animation-duration: 2s;
animation-fill-mode: both;
}
@keyframes fadeInDown{
0% {
opacity: 0;
transform: translateY(-50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft{
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInUp{
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInRight{
0% {
opacity: 0;
transform: translateX(50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
就这样~
