css3动画开发笔记_html/css

动画滑出效果

首先来看DMEO。
按钮的尺寸有一个放大的效果。利用transform: scale方法来实现；在放大的过程中，按钮的位置从右向左平移。利用left的值的变化可以实现该效果，为了避免按钮在最初出现时突兀的感觉，利用opacity: 0隐藏按钮，随着按钮的移动，opacity的值逐渐变为1。总的代码为：

@keyframes fade { from{ background: rgba(62, 191, 36, 1); transform: scale(0.5); left: 146px;} 50%{ background: rgba(62, 191, 36, 1);} to{ background: rgba(62, 191, 36, 1); transform: scale(1); left: 0;} }

接着是光芒效果。光芒的宽度从0变到178，透明度从0变成1。
光芒帧动画：

@keyframes shadow { from{ width: 0; opacity: 0;} to{ width: 178px; opacity: 1;} }

最后是调整动画的持续时间和延迟时间，保持协调：

.ani1 .shadow{ -webkit-animation-name:shadow;/*动画属性名，也就是我们前面keyframes定义的动画名*/ -webkit-animation-duration: .8s;/*动画持续时间*/ -webkit-animation-timing-function: linear;迟时间*/ -webkit-animation-iteration-count: 1;/*定义循环资料，infinite为无限次*/ -webkit-animation-fill-mode: forwards; } .ani1 .icons{ -webkit-animation-name: fade;/*动画属性名，也就是我们前面keyframes定义的动画名*/ -webkit-animation-duration: 0.75s;/*动画持续时间*/ -webkit-animation-timing-function: linear; /*动画频率，和transition-timing-function是一样的*/ -webkit-animation-delay: .2s;/*动画延迟时间*/ -webkit-animation-iteration-count: 1;/*定义循环资料，infinite为无限次*/ -webkit-animation-fill-mode: forwards; } 

另外贴上两个类似效果的实现：DMEO1，DEMO2