CSS3 动画属性(备忘)
2012-09-15 17:36
507 查看
其实用CSS3实现动画效果
主要涉及到3个CSS3属性:transition,animation 和 transform
transition
CSS3过渡属性,通过transition指定css属性,当该属性的值发生变化时,就会产生流畅的过渡效果。
transition主要包含四个属性值,分别为:
执行变换的属性:transition-property
变换延续的时间:transition-duration
在延续时间段,变换的速率变化:transition-timing-function
变换延迟时间:transition-delay
语法:
transition: property duration timing-function delay;
样式写法如下:
如果需要对不同属性实现不同的动画效果:
更多transition介绍,请看CSS3的transition属性
浏览器支持:
animation
这个属性十分强大,不需要任何JavaScript代码,就能实现循环的动画效果。
属性如下:
animation-name //动画的名称。
animation-duration //定义动画播放一次需要的时间。默认为0;
animation-timing-function //定义动画播放的方式,参数设置类似transition-timing-function
animation-delay //定义动画开始的时间
animation-iteration-count //定义循环的次数,infinite即为无限次。默认是1。
-webkit-animation-direction //动画播放的方向,两个值,默认为normal,这个时候动画的每次循环都向前播放。另一个值是alternate,则第偶数次向前播放,第奇数次向反方向播放。
写法如下:
浏览器支持:
transform
这个属性有很多功能,主要用来配合动画效果,结束以前需要使用top、left、bottom、right和margin等属性实现动画效果的日子。
另外,transform还支持3d!不过目前只在webkit浏览器上支持。
下面是transform的参数:
rotate //Rotate(旋转)允许你通过传递一个度数值来转动一个对象。
scale//Scale是一个缩放功能,可以让任一元素变的更大。它使用正数和负数以及小数作为参数。
translate//Translate就是基于X和Y 坐标重新定位元素
skew //顾名思义,skew就是要将对象倾斜,参数是度数
matrix//transform支持矩阵变换,就是基于X和Y 坐标重新定位元素
rotate:
让元素旋转
scale:
支持正数、负数和小数,负数值并不会缩小元素,而是翻转它。
translate:
移动元素的位置
Skew:
将一个对象围绕着x和y轴按照一定的角度倾斜,会让一个元素的形状改变
Matrix:
矩阵,相关文档连接:http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined
上面介绍的参数,都可以同感链式来实现:
transform-origin属性
用来指定transform的起点,如,rotate默认旋转以中心为起点,我们可以通过transform-origin来设置旋转点。
浏览器支持:
最后来一个Demo:http://jsfiddle.net/aUAQZ/2/embedded/result/
显示效果如下:(支持至Safari和Chrome,但不知道为什么,我家里的电脑Chrome不能正常显示,公司的却没问题)
来张会动的!
主要涉及到3个CSS3属性:transition,animation 和 transform
transition
CSS3过渡属性,通过transition指定css属性,当该属性的值发生变化时,就会产生流畅的过渡效果。
transition主要包含四个属性值,分别为:
执行变换的属性:transition-property
变换延续的时间:transition-duration
在延续时间段,变换的速率变化:transition-timing-function
变换延迟时间:transition-delay
语法:
transition: property duration timing-function delay;
样式写法如下:
-moz-transition: all 0.5s ease-in 1s; -webkit-transition: all 0.5s ease-in 1s; -o-transition: all 0.5s ease-in 1s; transition: all 0.5s ease-in 1s;
如果需要对不同属性实现不同的动画效果:
-moz-transition: background 0.5s ease-in,color 0.3s ease-out; -webkit-transition: background 0.5s ease-in,color 0.3s ease-out; -o-transition: background 0.5s ease-in,color 0.3s ease-out; transition: background 0.5s ease-in,color 0.3s ease-out;
更多transition介绍,请看CSS3的transition属性
浏览器支持:
animation
这个属性十分强大,不需要任何JavaScript代码,就能实现循环的动画效果。
属性如下:
animation-name //动画的名称。
animation-duration //定义动画播放一次需要的时间。默认为0;
animation-timing-function //定义动画播放的方式,参数设置类似transition-timing-function
animation-delay //定义动画开始的时间
animation-iteration-count //定义循环的次数,infinite即为无限次。默认是1。
-webkit-animation-direction //动画播放的方向,两个值,默认为normal,这个时候动画的每次循环都向前播放。另一个值是alternate,则第偶数次向前播放,第奇数次向反方向播放。
写法如下:
#rotate { margin: 0 auto; width: 600px; height: 400px; -webkit-animation-name: x-spin; -webkit-animation-duration: 7s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } @-webkit-keyframes x-spin { 0% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); } }
浏览器支持:
transform
这个属性有很多功能,主要用来配合动画效果,结束以前需要使用top、left、bottom、right和margin等属性实现动画效果的日子。
另外,transform还支持3d!不过目前只在webkit浏览器上支持。
下面是transform的参数:
rotate //Rotate(旋转)允许你通过传递一个度数值来转动一个对象。
scale//Scale是一个缩放功能,可以让任一元素变的更大。它使用正数和负数以及小数作为参数。
translate//Translate就是基于X和Y 坐标重新定位元素
skew //顾名思义,skew就是要将对象倾斜,参数是度数
matrix//transform支持矩阵变换,就是基于X和Y 坐标重新定位元素
rotate:
让元素旋转
-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);/* 兼容IE */
scale:
支持正数、负数和小数,负数值并不会缩小元素,而是翻转它。
-webkit-transform: scale(-2, 1); -moz-transform: scale(-2, 1); -o-transform: scale(-2, 1);结合:hover
#nav li a:hover{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); }
translate:
移动元素的位置
-moz-transform: translate(10px, 20px); -webkit-transform: translate(10px, 20px); -o-transform: translate(10px, 20px);
Skew:
将一个对象围绕着x和y轴按照一定的角度倾斜,会让一个元素的形状改变
-moz-transform: skew(30deg, -10deg); -webkit-transform: skew(30deg, -10deg); -o-transform: skew(30deg, -10deg);
Matrix:
矩阵,相关文档连接:http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined
-moz-transform: matrix(1, -0.2, 0, 1, 0, 0); -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0); -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
上面介绍的参数,都可以同感链式来实现:
-moz-transform: translate(10, 25) rotate(90deg) scale(2, 1); -webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1); -o-transform: translate(10, 25) rotate(90deg) scale(2, 1);
transform-origin属性
用来指定transform的起点,如,rotate默认旋转以中心为起点,我们可以通过transform-origin来设置旋转点。
-moz-transform-origin: 0 0; -webkit-transform-origin: 0 0; -o-transform-origin: 0 0;transform-origin的参数可以为百分比,em,px等值。
浏览器支持:
最后来一个Demo:http://jsfiddle.net/aUAQZ/2/embedded/result/
显示效果如下:(支持至Safari和Chrome,但不知道为什么,我家里的电脑Chrome不能正常显示,公司的却没问题)
来张会动的!
相关文章推荐
- CSS3 动画属性(备忘)
- CSS3动画之animation属性学习笔记
- CSS3动画属性:动画(animation)
- CSS3中和动画有关的属性transform、transition 和 animation
- CSS3 动画属性 animation 的基本用法
- CSS3动画属性之Animation
- CSS3展现精彩的动画效果 css3的动画属性
- CSS3动画的属性主要分为三类:transform、transition以及animation。
- CSS3 动画Animation的8大属性
- CSS3的 transform属性,怎么才能让他同时执行多个不同动画(属性)效果
- css3动画的属性
- css3动画属性系列之transform细讲scale缩放
- CSS3 动画Animation的8大属性
- CSS3中和动画有关的属性transform、transition 和 animation
- CSS3变形与动画的相关属性
- css3各种动画属性
- CSS3 变形、过渡、动画、关联属性浅析
- CSS3每日一练之动画属性-Transitions
- 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果