1.参考链接
http://blog.csdn.net/sadfishsc/article/details/7165163/
2.动画内容
CSS3动画的属性主要分为三类:transform、transition以及animation。因为CSS3还没有正式发布,所以各种浏览器对它的支持也不尽相同。所以在设置CSS3属性(包括@开头的新属性)的时候通常需要对其添加浏览器标识的前缀,如-webkit- 表示Webkit内核的浏览器Chrome和Safari,-moz- 表示Fire Fox,-o- 表示Opera。无视IE吧,在IE上的实现通常还是要用到滤镜,而不是CSS3。
1、transform
rotate
设置元素顺时针旋转的角度,用法是:
transform: rotate(x);
参数x必须是以deg结尾的角度数或0,可为负数表示反向。
scale
设置元素放大或缩小的倍数,用法包括:
transform: scale(a); 元素x和y方向均缩放a倍
transform: scale(a, b); 元素x方向缩放a倍,y方向缩放b倍
transform: scaleX(a); 元素x方向缩放a倍,y方向不变
transform: scaleY(b); 元素y方向缩放b倍,x方向不变
translate
设置元素的位移,用法为:
transform: translate(a, b); 元素x方向位移a,y方向位移b
transform: translateX(a); 元素x方向位移a,y方向不变
transform: translateY(b); 元素y方向位移b,x方向不变
skew
设置元素倾斜的角度,用法包括:
transform: skew(a, b); 元素x方向逆时针倾斜角度a,y方向顺时针倾斜角度b
transform: skewX(a); 元素x方向逆时针倾斜角度a,y方向不变
transform: skewY(b); 元素y方向顺时针倾斜角度b,想方向不变
以上的参数均必须是以deg结尾的角度数或0,可为负数表示反向。
matrix
设置元素的变形矩阵,因为矩阵变形过于复杂,暂略。
origin
设置元素的悬挂点,用法包括:
transform-origin: a b; 元素的悬挂点为(a, b)
元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。
2、transition
transition-property
指定transition效果作用的CSS属性,其值是CSS属性名。
transition-duration
动画效果持续的时间,其值为以s结尾的秒数。
transition-timing-function
指定元素状态的变化速率函数,其取值基于贝赛尔曲线函数,详情如下所示:
transition-delay
动画效果推迟开始执行的时间,其值为以s结尾的秒数。
CSS3动画的生命周期如下图所示,从中可以清楚的看出duration和delay之间的关系:
3、transform
CSS3中真正的动画属性是animation,而前面的transform和transition都只是对DOM元素的变形或者是状态的过渡。实际上,CSS3所支持的动画效果只是填充动画,也就是说先设定整个动画生命周期中的几个关键状态(key frame,关键帧),然后动画将自行计算并模拟关键帧之间的过渡。那么在设置animation的属性之前就必须先设定好关键帧了。
关键帧@keyframes的语法结构如下:
@keyframesNAME {
a% {
/*CSS属性*/
}
b% {
/*CSS属性*/
}
...
}
NAME表示动画的名字;a%、b%表示以百分号结尾的百分数,用于设定该关键帧在动画生命周期中的位置;百分数后面的{ } 中则需要写成该关键帧状态下CSS属性的值。另外,如果同一个百分数值在@keyframes中出现多次,那么后出现的将覆盖先出现的;并且关键帧在@keyframes中时无序的。
设置完关键帧后就可以继续设定animation了。
animation-name
指定选用的动画的名字,即keyframes中的NAME。
animation-duration
同transition-duration。
animation-timing-function
同transition-timing-function。
animation-delay
同transition-delay。
animation-iteration-count
设定动画执行的次数,其值可以是数字也可以是infinite(循环执行)。
animation-direction
设定动画执行的方向,其值可以是normal(正常顺序播放)或alternate(反向播放)
- 大小: 557.4 KB
- 大小: 125.8 KB
分享到:
相关推荐
css3动画学习资料
css3 鼠标悬停动画,实现了多种悬停后产生不同的动画的效果图
大屏回凹头部 css3特效动画按路径移动 css即层叠样式表,想必学习前端的小伙伴们已经非常熟悉了。那么大家应该都知道,一个炫酷的动画特效,能使你的网站显得更加高大上,丰富内容吸引用户。
纯CSS动画,适合新手学习用,所有效果都有,还有各种搭配
10例CSS3动画特效,有代码编译的界面,直观学习,很好的教材。
本文主要分享了15个无比华丽的HTML5/CSS3动画应用,供大家参考学习。 1、HTML5/CSS3图片选择动画 可选择多张图片 今天我们来分享一款既炫酷又实用的HTML5图片选择特效,当图片被选中时,图片上就会覆盖一个半透明的...
标签:CSS动画、红色心形、网页特效 描述:这是一个使用纯CSS实现的网页特效,它展示了一个红色的心形图案,...这个特效可以用于网页的装饰,增加页面的趣味性和吸引力,同时也可以作为学习CSS动画技术的一个实例。
对于初学者,也可以通过学习本资源来提高自己的CSS动画技能。 使用场景及目标:本资源的动画效果非常可爱精致,适用于各种卡通风格的网站、游戏等场景。通过学习本资源,读者可以掌握如何使用CSS实现动画效果,提高...
基于Zepto+CSS3宝箱开启动画抽奖JS特效代码,很不错的特效代码,特效基于Zepto、CSS3, 其中有好几种CSS3动画效果,背景光环滚动,宝箱摇摆开启,弹出提示层,还是很不错的CSS3 ...动画特效,大家可以学习下。
一款非常简单的CSS3彩色柱状阶梯波浪动画特效,CSS3基于animation属性制作,新手可以下载学习学习。
5种jquery+css3鼠标移动悬停动画效果,供大家一起共同分享学习。
css动画代码,一些demo。用于对css3的学习。css动画代码,一些demo。用于对css3的学习。
像圆角按钮、浮动菜单、圆角的输入框、带箭头的浮动提示框、带三角的下拉菜单、网页拖动条、网页开关等,另外还包括一些用CSS3做出来的图标素材,如果想学习CSS3,这些素材还可作为不错的参考范例。
个人学习css3例子与笔记,包含基础部分与关键布局,阴影效果,动画效果,鼠标移过内容上浮效果,纯css画三角形圆形等例子与总结
为了满足现有的对于 Web UI 的开发需求,它提供了一系列强大的功能,如许多新的 CSS 属性(文字,布局,颜色等等),各种 CSS 特效,甚至还支持 CSS 动画、元素的变换。这些 CSS 新特性在现阶段可以说都是非常强大和...
这是一款个性创意的CSS3动感弹性波纹变换动画特效,纯CSS3圆形波纹动画效果,虽然实用性不强,不过可以学习实现方法做出自己想要的效果。
CSS动画加载效果源码 源码描述: 一、源码特点 1、Loaders.css 是一个为性能优化的实现加载动画效果的 CSS 框架。效率高,动画效果流畅。强烈推荐使用。 二、注意事项 1、开发环境为HTML5+CSS
一款简单的纯CSS3实现的旋转原子动画特效,效果虽然实用性不强,但参考学习还是不错的。
HTML5 CSS3荡秋千动画,小女孩和秋千动画,纯HTML5技术绘制的秋千,然后使用CSS3的动画属性添加了动画效果,上下荡漾的动画十分流畅自然,本特效主要是让大家学习参考基于HTML5的动画制作技术,对学习HTML5很不错的...
一个CSS3实现的旋转动画效果,打开网页后,可看到一些圆环嵌套在一起,循环旋转效果,基于HTML5的CSS3动画技术渲染,对您学习CSS3技术或许会有不小的帮助。