css⼊场动画_进⼊css3动画世界（⼀）
其实我做css3动画也没有多久，这篇⽂章⽬标⼈是css3动画的新⼿，不喜勿喷。
分类
⽬前我接触到的css3动画有2类：⼀种是transition的，另⼀种是@keyframes的。
两者的区别就是，transition的动画表达是从⼀种状态到另⼀种状态，⽽@keyframes更加灵活，⼀个动画可以在不同进度表现成不同的状态。
当然，如果从操作的对象进⾏分类(就我⽬前接触的⽽⾔)，我想可以分3种，⼀种是html元素，⼀种是svg的，还有就是sprites的。
⼤家可能见过⼀个css3动画是关于⼀个会动的⼤象
⼤象的⾝体是由很多个`div`构成的，我们可以给每⼀个div都加上动画；
另⼀种是svg，美⼯⽤AI给你做⼀个图，图内有若⼲个已经命名的图层，图内的元素相应编好组，输出svg后，拖进编辑器，你就可以看到id名和图层命名相同的标签，看到编组后的标签，这时候你会发现，
svg的元素和上⾯例⼦的div差不多，⽽且形状还不⽤⾃⼰想出来，美⼯已经帮你做好了，剩下来的就是你要给它加动画了；
还有⼀种sprites，美⼯把整个动画都⽤AE输出了，然后你只需要把动画扔到PS，把全部帧扔在⼀起做出⼀个长图，再通过变换background-position的属性，就可以做出动画效果了。
## ⼊门
> 最佳的⼊门选择就是`transition`。
transition意思是过渡，可以理解成从⼀种状态变成另⼀种状态。
这些状态包括很多，我⾃⼰没整理出来，暂时引⽤⼀下别⼈整理到的Transition 所⽀持的css属性.
像transition这个属性，我们经常⽤hover与它搭配，写好hover前后的变化，加上transition属性就可以让他们过渡了。
效果：
源码：
改变宽
改变⾼
改变背景
改变字体
改变矩形⾓
平移
改变阴影
旋转
缩放
.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);
}
rotate属性
100%{
transform: rotate(360deg);
}
}
.rotate{
/*transition: 0.5s;*/
transform-origin: 30px 30px;
animation: rotate 10s linear infinite;
}
⽽@keyframes灵活的是，它还能定义中间的状态，可以加个25%，50%，75%……
开篇我就写这些，感兴趣的可以继续看下⼀篇，以后会更新。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。