这篇博客通过示例代码展示了如何仅使用CSS3创建动画效果，包括淡入淡出的各种方向。代码中定义了不同动画关键帧，如fadeInDown、fadeInLeft等，并应用到不同的div元素上，通过调整动画持续时间和填充模式来实现不同的动画速度和行为。
这是一个比较简单的小例子，实现如图效果
仅仅用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);
}
}
就这样~
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
