css3动画开发笔记
Posted 前端JavaScript
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3动画开发笔记相关的知识，希望对你有一定的参考价值。
动画滑出效果
首先来看DMEO http://dabblet.com/gist/05feae0bf9ed3ceca676。
按钮的尺寸有一个放大的效果。利用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 http://dabblet.com/gist/eb842f91c5acc57b3cc4，DEMO2
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
<<<< 每日推荐 <<<<
==========阅读原文==========
以上是关于css3动画开发笔记的主要内容，如果未能解决你的问题，请参考以下文章