分类
目前我接触到的css3动画有2类:一种是
transition
的,另一种是@keyframes
的。
两者的区别就是,transition
的动画表达是从一种状态到另一种状态,而@keyframes
更加灵活,一个动画可以在不同进度表现成不同的状态。
当然,如果从操作的对象进行分类(就我目前接触的而言),我想可以分3种,一种是html元素,一种是svg的,还有就是sprites的。
大家可能见过一个css3动画是关于一个会动的大象
大象的身体是由很多个div
构成的,我们可以给每一个div都加上动画;
另一种是svg
,美工用AI给你做一个图,图内有若干个已经命名的图层,图内的元素相应编好组,输出svg后,拖进编辑器,你就可以看到id名和图层命名相同的标签,看到编组后的<g></g>
标签,这时候你会发现,svg的元素和上面例子的div差不多,而且形状还不用自己想出来,美工已经帮你做好了,剩下来的就是你要给它加动画了;
还有一种sprites
,美工把整个动画都用AE输出了,然后你只需要把动画扔到PS,把全部帧扔在一起做出一个长图,再通过变换background-position
的属性,就可以做出动画效果了。
入门
最佳的入门选择就是
transition
。
transition意思是过渡,可以理解成从一种状态变成另一种状态。
这些状态包括很多,我自己没整理出来,暂时引用一下别人整理到的Transition 所支持的css属性.
像transition这个属性,我们经常用hover
与它搭配,写好hover前后的变化,加上transition属性就可以让他们过渡了。
效果:
源码:
<div class="shape width">改变宽</div>
<div class="shape height">改变高</div>
<div class="shape bg">改变背景</div>
<div class="shape font">改变字体</div>
<div class="shape bd-r">改变矩形角</div>
<div class="shape translate">平移</div>
<div class="shape shadow">改变阴影</div>
<div class="shape rotate">旋转</div>
<div class="shape scale">缩放</div>
.shape{
width: 100px;
height: 100px;
background: #777;
float: left;
margin-right: 3px;
color: #fff;
line-height: 100px;
text-align: center;
transition: 0.5s;
border: 1px solid #555;
}
.width:hover{
width: 200px;
}
.height:hover{
height: 200px;
}
.bg:hover{
background: #000;
}
.font:hover{
font-size: 20px;
color: yellow;
}
.bd-r:hover{
border-radius: 50px;
}
.translate:hover{
transform: translate(0,20px);
}
.shadow:hover{
box-shadow: 0px 5px 5px #000;
}
.rotate:hover{
transform: rotate(30deg);
}
.scale:hover{
transform: scale(1.5,1.5);
}
进阶
其实也算不上进阶,
@keyframes
这个玩意大家稍微花点时间就能很轻易的学会了。
其实 @keyframes 的效果在特定条件下和 transition 一样,就是只定义了 0%和100% 或者 from和to 状态下的 @keyframes 和 transition 一样。
源码:(这个svg图是我用AI画出来的,感兴趣的可以自己画一个)
#change{
display: block;
height: 100px;
width: 50px;
background: #999;
transition: 0.3s;
}
#shape{
width: 600px;
height: 200px;
margin-left: 50%;
position: relative;
left: -300px;
}
@keyframes rotate{
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
.rotate{
/*transition: 0.5s;*/
transform-origin: 30px 30px;
animation: rotate 10s linear infinite;
}
而@keyframes灵活的是,它还能定义中间的状态,可以加个25%,50%,75%……
开篇我就写这些,感兴趣的可以继续看下一篇,以后会更新。