我们在做js动画的时候,很多时候都需要做回调处理,如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等,但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢?CSS3动画也是可以做回调处理的,这里分为两个属性,一个是transition[w3c文档],另外一个是animation...
分类:
Web程序 时间:
2014-12-10 12:10:24
阅读次数:
162
今天学习了CSS3动画,涉及到的属性:@keyframes,animation,animation-duration,animation-name,animation-timing-function,animation-delay,animation-iteration-count,animatio...
分类:
Web程序 时间:
2014-12-09 22:46:52
阅读次数:
3131
这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip、Rotation、Multi-flip、Cube、Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transition 属性的强大能力。随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的...
分类:
Web程序 时间:
2014-12-08 10:32:35
阅读次数:
167
下面我们从3个方面开始介绍:1、scale(x,y)对元素进行缩放X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。Css代码transform:scale(2,2.5);2、scaleX()元素只在X轴(水平方...
分类:
Web程序 时间:
2014-12-07 11:21:11
阅读次数:
248
第一步:
定义动画,名字可以各种起,就像方法名一样
1. 定义动画,名称为fadeIn
@-webkit-keyframes fadeIn {
0% {
opacity: 0; /*初始状态 透明度为0*/
}
50% {
opacity: 0; /*中间状态 透明度为0*/
}
100% {
opacity: 1; /*结尾状态 透明度为1*/
}
}
方法里面还...
分类:
Web程序 时间:
2014-12-04 18:11:07
阅读次数:
220
1.jQuery超酷平面时钟特效插件这是一个非常具有创意的jQuery时钟插件,它不像其他的时钟插件一样是圆盘的或者是数字的,它是一个平面时钟,日期和时分秒的指针都是在平面上移动计时的,尽管这款jQuery平面时钟插件不能广泛应用,但是创意是绝对可以肯定的。在线演示源码下载2.4款基于jquery的...
分类:
Web程序 时间:
2014-12-04 12:03:32
阅读次数:
175
先看一下该网站的效果http://2014guangzhouchezhan.dongfeng-citroen.com.cn/mobile/该站里面的动画效果由简易动画与css3动画2种方式混合达到的。一、特点与差异、1.简易动画直接通过对dom元素追加class类名与属性参数像这样实现原理:是对jQ...
分类:
Web程序 时间:
2014-12-04 12:01:42
阅读次数:
196
下面我们从3个方面开始介绍:1、scale(x,y)对元素进行缩放X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。Css代码transform:scale(2,2.5);2、scaleX()元素只在X轴(水平方...
分类:
Web程序 时间:
2014-12-03 18:42:55
阅读次数:
165
@keyframes规则用于创建动画。 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果@keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:规定动画的名称规定动画...
分类:
Web程序 时间:
2014-11-29 10:09:15
阅读次数:
243
译自:你需要知道的CSS3 动画技术 译自:What You Need To Know About Behavioral CSS 请尊重版权,转载须注明本站链接!译序:本文译自Smashingmagazine,但是原文讲述的内容有些浅,也不是很完整,前端观察在翻译的前提下,增加了更多的更系统的内容。...
分类:
Web程序 时间:
2014-11-29 00:03:26
阅读次数:
347