css3 动画属性详解
下面的是我的笔记
1、transition: 平衡过渡
transition :过渡效果的 CSS 属性的名称 完成过渡效果需要多少秒或毫秒 速度效果的速度曲线 过渡效果何时开始
1)过渡效果的 CSS 属性的名称(一般有):all、no、 width、height
2)速度效果的速度曲线(动画的速度曲线):
linear | 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。 |
ease | 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。 |
ease-in | 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。 |
ease-out | 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。 |
ease-in-out | 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
2、animation: 动画
一般通过@keyframes 规则,创建动画。 在动画过程中,您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。0% 是动画的开始时间,100% 动画的结束时间。
例子:
animation: mymove 开始时间 动画的速度曲线 延迟 重复次数 是否应该轮流反向播放动画
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
3、transform: 改变元素的大小、位置
注意:粉红色为图形原来的样子,大红色为变化后的样子
1) translate:移动
translate(x,y) | 定义 2D 转换。 |
translate3d(x,y,z) | 定义 3D 转换。 |
translateX(x) | 定义转换,只是用 X 轴的值。 |
translateY(y) | 定义转换,只是用 Y 轴的值。 |
translateZ(z) | 定义 3D 转换,只是用 Z 轴的值。 |
2) rotate:旋转
旋转的时候,可以给旋转的模块设置一个原点 (下图的圆心为设置的原点,模块内的点为原始的原点)
transform-origin: x , y;
3) scale:放缩
4) skew:扭曲(倾斜)
5) matrix:矩阵,一般用来变换前面四种没有的效果,也可以实现前面四种效果
请看:Matrix详解
4、动画技巧:
1、animation-delay:设置为负值
animation-delay:定义动画何时开始
默认为0 | 立即执行动画 |
正值 | 延迟指定时间后执行动画 |
负值 | 立即执行,但跳过指定时间后进入动画(比如取值 -1,即是跳过动画执行的一秒,从 00:01 开始执行动画) |
例子:
1)效果图 :动画延迟
2)代码:animation-delay
2、设置border的颜色
边框分为4部分
border-left-color、border-top-color、border-right-color、border-bottom-color
例子:
1)效果图:边框颜色
2)代码:border-left+animation+transform
3、设置border的宽度
border-left-width、border-top-width、border-right-width、border-bottom-width
例子:
1)效果图:折角效果图
2)代码:折角效果
推荐阅读
-
Css3制作变形与动画效果
-
Android中ViewFlipper的使用及设置动画效果实例详解
-
原生JS检测CSS3动画是否结束的方法详解
-
Android 动画之ScaleAnimation应用详解
-
Android 动画之RotateAnimation应用详解
-
Android 动画之TranslateAnimation应用详解
-
Android 动画之AlphaAnimation应用详解
-
Android Activity切换动画详解及实例
-
基于CSS3 animation动画属性实现轮播图效果
-
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)