1.动画是由变换和过渡效果组成,因此需要先熟悉过渡。
变换:transform属性如下
2D Transform Functions:
3D Transform Functions:
过渡:transition四个属性如下:
<' transition-property '>:规定设置过渡效果的 CSS 属性的名称。
规定完成过渡效果需要多少秒或毫秒。
规定速度效果的速度曲线。
其中transition-timing-function的参数有:
缩写方式:
transition: all .5s ease-in .1s;
如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开如:<br />
div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
浏览器支持:
2.有了以上条件,就可以写动画了(animation)
必须条件:@keyframes 规则用于创建动画
.a1{
-webkit-transform:translate(60px);
-moz-transform:translate(60px);
transform:translate(60px);
-webkit-animation:animations 2s ease-out forwards;
-moz-animation:animations 2s ease-out forwards;
animation:animations 2s ease-out forwards;
}
@-webkit-keyframes animations{
0%{-webkit-transform:translate(0);opacity:0;}
50%{-webkit-transform:translate(30px);opacity:1;}
70%{-webkit-transform:translate(35px);opacity:1;}
100%{-webkit-transform:translate(60px);opacity:0;}
}
@-moz-keyframes animations{
0%{-moz-transform:translate(0);opacity:0;}
50%{-moz-transform:translate(30px);opacity:1;}
70%{-moz-transform:translate(35px);opacity:1;}
100%{-moz-transform:translate(60px);opacity:0;}
}
@keyframes animations{
0%{transform:translate(0);opacity:0;}
50%{transform:translate(30px);opacity:1;}
70%{transform:translate(35px);opacity:1;}
100%{transform:translate(60px);opacity:0;}
}
.a3{
opacity: 0;
-webkit-transform:translate(100px);
-moz-transform:translate(100px);
transform:translate(100px);
-webkit-animation:animations3 2s ease-out 2s forwards;
-moz-animation:animations3 2s ease-out 2s forwards;
animation:animations3 2s ease-out 2s forwards;
}
@-webkit-keyframes animations3{
0%{-webkit-transform:translate(160px);opacity:0;}
50%{-webkit-transform:translate(130px);opacity:1;}
70%{-webkit-transform:translate(125px);opacity:1;}
100%{-webkit-transform:translate(100px);opacity:0;}
}
@-moz-keyframes animations3{
0%{-moz-transform:translate(160px);opacity:0;}
50%{-moz-transform:translate(130px);opacity:1;}
70%{-moz-transform:translate(125px);opacity:1;}
100%{-moz-transform:translate(100px);opacity:0;}
}
@keyframes animations3{
0%{transform:translate(160px);opacity:0;}
50%{transform:translate(130px);opacity:1;}
70%{transform:translate(125px);opacity:1;}
100%{transform:translate(100px);opacity:0;}
}
.a2{
opacity: 0;
text-align:center;font-size:26px;
-webkit-animation:animations2 5s ease-in-out 4s forwards;
-moz-animation:animations2 5s ease-in-out 4s forwards;
animation:animations2 5s ease-in-out 4s forwards;
}
@-webkit-keyframes animations2{
0%{opacity:0;}
40%{opacity:.8;}
45%{opacity:.3;}
50%{opacity:.8;}
55%{opacity:.3;}
60%{opacity:.8;}
100%{opacity:0;}
}
@-moz-keyframes animations2{
0%{opacity:0;}
40%{opacity:.8;}
45%{opacity:.3;}
50%{opacity:.8;}
55%{opacity:.3;}
60%{opacity:.8;}
100%{opacity:0;}
}
@keyframes animations2{
0%{opacity:0;}
40%{opacity:.8;}
45%{opacity:.3;}
50%{opacity:.8;}
55%{opacity:.3;}
60%{opacity:.8;}
100%{opacity:0;}
}
浏览器兼容: