1.定义关键帧@keyframes zhuanquan{ 0% {-webkit-transform: rotate(0);} 100% {-webkit-transform: rotate(360deg);}}@-webkit-keyframes zhuanquan/* Safari and .....
分类：
Web程序 时间：
2015-02-07 14:28:11
阅读次数：
157
当使用css3时，会遇到利用@keyframes来定义动画事件，利用以下3个事件，能够捕捉当前元素的动画：AnimationEnd//动画结束时AnimationStart //动画開始AnimationIteration //动画每运行结束一次，这样的情况适用与animation-iteratio...
分类：
Web程序 时间：
2015-02-06 20:19:38
阅读次数：
183
@-webkit-keyframes neon { 0% { opacity: .3; -webkit-transform: scale(2); transform: scale(2); } 100% { opacity: 1; -webkit-transform: s...
分类：
其他好文 时间：
2015-02-03 20:54:12
阅读次数：
141
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。Chrome 和 Safari 需要前缀 -webkit-。Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 anima...
分类：
Web程序 时间：
2015-01-23 16:13:36
阅读次数：
142
js动画实现的方法到现在有三种1 css3：通过animattion+keyframes;或transition2.setTimeout/setInterval：setTimeout/setInterval:通过递归调用同一方法来不断更新动画元素以达到动起来的效果，动画过度绘制，浪费 CPU 周期以...
分类：
Web程序 时间：
2015-01-17 22:05:59
阅读次数：
189
New Document
div{
margin-bottom:10px;
width:200px;
height:100px;
}
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background:...
分类：
Web程序 时间：
2015-01-10 11:19:52
阅读次数：
232
/* 印章效果 */@-webkit-keyframes zoomIn { 0% { opacity:0; -webkit-transform: scale3d(10, 10, 10); transform: scale3d(10, 10,10); } 1...
分类：
Web程序 时间：
2014-12-29 20:02:18
阅读次数：
219
纯css3实现了一个正六边形的走马灯效果，记录一下css3动画的学习情况，效果如下：主要用到的css3技术有：keyframes、perspective、perspective-origin、transform（translate、rotate）、animation、transform-origin...
分类：
Web程序 时间：
2014-12-26 11:07:43
阅读次数：
1144
偷懒使用animate.css来制作效果animate动画的基本属性：属性描述CSS@keyframes规定动画。3animation所有动画属性的简写属性，除了 animation-play-state 属性。3animation-name规定 @keyframes 动画的名称。3animatio...
分类：
Web程序 时间：
2014-12-23 12:10:47
阅读次数：
186
今天学习了CSS3动画，涉及到的属性：@keyframes,animation,animation-duration,animation-name,animation-timing-function,animation-delay,animation-iteration-count,animatio...
分类：
Web程序 时间：
2014-12-09 22:46:52
阅读次数：
3131
