css3动画整理
css3动画主要常用的属性有 变形(transform),转换(transition),动画(animation)三种。
变形(transform)主要有以下几种方式:
旋转rotate:rotate((<number>) transform:rotate(20deg);
扭曲skew:skew(x,y) transform:skew(30deg,10deg):
缩放scale:scale(x,y) transform:scale(30deg,10deg):
移动translate :translate(x,y) transform:translate(100px,0)
矩阵变形matrix:matrix(<number>, <number>, <number>, <number>, <number>, <number>)
改变元素的基点位置transform-origin:transform-origin(X,Y) 用来设置元素的运动的基点(参照点)。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px,其中X也可以是字符参数值 left,center,right;Y和X一样除了百分值外还可以设置字符值top,center,bottom(transform-origin并不是transform中的属性值,他具有自己的语法)
transform语法:
transform: none|transform-functions;
例:
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */ }
详细属性介绍:http://www.w3school.com.cn/cssref/pr_transform.asp
转换(transition):css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”
transition主要包含四个属性值:
执行变换的属性:transition-property,
变换延续的时间:transition-duration,
变换的速率变化transition-timing-function,
变换延迟时间transition-delay。
语法:
transition: property duration timing-function delay;
例:
div { width:100px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ }
.div1{
width: 100px;
-webkit-transition:-webkit-transform 1s 2s;
-ms-transition:-ms-transform 1s 2s;
-o-transition:-o-transform 1s 2s;
transition:transform 1m 2s;
-webkit-transform:translate(100px,0);
-ms-transform:translate(100px,0);
-o-transform:translate(100px,0);
transform:translate(100px,0);
}
详细属性介绍:http://www.w3school.com.cn/cssref/pr_transition.asp
动画(animation):CSS3的Animation是由“keyframes”这个属性来实现效果的,"Keyframes",类似于“关键帧",Keyframes具有其自己的语法规则,他的命名是由"@keyframes"开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”。
keyframes 案例:
@keyframes myfirst { from {background: red;} to {background: yellow;} }
或
@keyframes myfirst
{
0% {background: red;}
50% {background: yellow;}
100% {background: green;}
}
创建好动画后使用时需要绑定到选择器上,这样才会有效果,那下面就用到了animation:
例:
div { animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ -o-animation: myfirst 5s; /* Opera */ }
animation主要包含以下几个属性:
用来定义一个动画的名称:animation-name,
指定元素播放动画所持续的时间长:animation-duration,
动画的播放方式:animation-timing-function,
播放方式有几下几种:
1、ease:(逐渐变慢)默认值
2、linear:(匀速)
3、ease-in:(加速)
4、ease-out:(减速)
5、ease-in-out:(加速然后减速)
6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内, 否则无效。
指定元素动画开始时间:animation-delay,
指定元素播放动画的循环次数:animation-iteration-count,
指定元素动画播放的方向:animation-direction,
参数有以下几种:
1、normal: 默认值为normal,每次循环都是向前播放
2、alternate:动画播放在第偶数次向前播放,第奇数次向反方向播放
控制元素动画的播放状态:animation-play-state(注:这个属性目前很少内核支持)
参数有以下几种
1、running: 默认值 通过running将暂停的动画重新播放
2、paused:通过paused将正在播放的动画停下了
语法:
animation:name,duration,timing-function,delay,iteration-count,direction,play-state
详细属性介绍:http://www.w3school.com.cn/css3/css3_animation.asp
参考:http://www.cnblogs.com/2050/p/3409129.html