css3动画效果分三类
transition(过渡属性)
①transition-propertty:设置对象中的参与过渡的属性
- all:所有可以进行过渡的css属性
- none:不指定过渡的css属性
- property:指定要进行过渡的css属性(width、height、color。。。)
②transition-duration:设置对象过渡的持续时间,主要以S为单位
③transition-timing-function:设置对象中过渡的类型
- linear:线性过渡,匀速。
- ease:平滑过渡,由快到慢,逐渐变慢
- ease-in:由慢到快。
- ease–out:由快到慢。
- ease-in-out:由慢到快再到慢。
④transition-delay:设置对象延迟过渡的时间(可不设置)
一般是transition: all 持续时间 ease 延迟时间(可不设置);
transform(转换,主要2D和3D转换)
属性:
1. rotate: 设置元素顺时针旋转的角度(transform: rotate(0)、rotate(45deg);)
2. scale: 设置元素放大或缩小的倍数
(transform: scale(a); 元素x和y方向均缩放a倍、transform: scale(a, b); 元素x方向缩放a倍,y方向缩放b倍)
3. translate: 设置元素位移
(translate(a, b); 元素x方向位移a,y方向位移b、translateX(a); 元素x方向位移a,y方向不变、translateY(b); 元素y方向位移b,x方向不变)
4. skew: 设置元素倾斜的角度
(skew(a, b); 元素x方向逆时针倾斜角度a,y方向顺时针倾斜角度b、 skewX(a); 元素x方向逆时针倾斜角度a,y方向不变、skewY(b); 元素y方向顺时针倾斜角度b,想方向不变)
以上的参数均必须是以deg结尾的角度数或0,可为负数表示反向。
5. origin: 设置元素的悬挂点
(transform-origin: a b; 元素的悬挂点为(a, b),元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。)
animation(动画)
/* 动画的名字,播放时间,延时时间,动画效果,播放次数,播放顺序*/
属性详情:
animation-direction:属性定义是否应该轮流反向播放动画。
animation-fill-mode : 属性规定动画在播放之前或之后,其动画效果是否可见。
animation-iteration-count 属性定义动画的播放次数。
animation-play-state 属性规定动画正在运行还是暂停。
animation-timing-function 规定动画的速度曲线。
实例:
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
兼容性:
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;