CSS3之动画animate
@(CSS)[笔记]
CSS3的强大是因为CSS3增加完成了CSS之前不能完成的工作，而且还能完成之前需要JavaScript才能完成的特效，例如的动画
CSS3的动画主要是运用新特性：animation结合keyframes形成运动效果。
animation属性定义运动的时间和次数等。详情参考：animation属性
@keyframes 的规则用于创建动画：在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
分享一个强大的CSS3动画库——Animate.CSS
一个强大的Markdown编辑器马克飞象
w3cschool中的一个特效动画实例：
#anima:hover {
-moz-animation: anima 1s 1;
-o-animation: anima 1s 1;
-webkit-animation: anima 1s 1;
animation: anima 1s 1;
}
@keyframes anima {
/*百分百是设置时间的*/
/*在0%的时间的时候旋转0度，左侧距离0*/
/*样式是动态变化的*/
0% {
transform: rotate(0deg);
left: 0;
}
/*在25%的时间的时候旋转20度，左侧距离0*/
25% {
transform: rotate(20deg);
left: 0px;
}
/*在50%的时间的时候恢复0度，左侧距离500*/
50% {
transform: rotate(0deg);
left: 500px;
}
/*在55%的时间的时候保持0度，左侧距离500*/
55% {
transform: rotate(0deg);
left: 500px;
}
/*在70%的时间的时候保持0度，左侧距离500*/
70% {
transform: rotate(0deg);
left: 500px;
background: #1ec7e6;
}
/*在100%的时间的时候逆向旋转360度，左侧恢复距离0*/
100% {
transform: rotate(-360deg);
left: 0px;
}
}
结合border-radius和box-shadow做的一个按钮特效：
让按钮的box-shadow形成动画效果
#anima:hover {
-moz-animation: anima 1s 1;
-o-animation: anima 1s 1;
-webkit-animation: anima 1s 1;
animation: anima 1s 1;
}
@keyframes anima {
0% {
box-shadow: 0 0 0 5px #665;
}
20% {
/*box-shadow不影响布局
外部阴影会跟着radius圆角*/
box-shadow: 0 0 0 5px #665,
0 0 0 12px deeppink;
}
40% {
box-shadow: 0 0 0 5px #665,
0 0 0 12px deeppink,
0 0 0 20px #1ec7e6;
}
60% {
box-shadow: 0 0 0 5px #665,
0 0 0 12px deeppink;
}
80% {
box-shadow: 0 0 0 5px #665;
}
100% {
}
}
具体的效果在之后的作品中更新
