汇总之--css3 animation

动画的使用

动画的定义

@keyframes toright{
from{
/* from中如果不设置 默认使用的是 初始状态 */
}
to{
transform: translateX(800px);
}
}

/* 准备一个class 内部定义了动画的各种效果 */
.animation{
/* 动画的名字 */
animation-name: toright;

/* 动画持续多久 */
animation-duration: 2s;

/* 设置动画的次数
动画次数
可以给具体的值
infinite 无限
*/
animation-iteration-count: infinite;

/* 动画的速度 线型 */
animation-timing-function: linear;

/* 动画的延迟事件 */
animation-delay: 2s;
}
/* 动画属性的复合写法 */
.animation-oneline{
/* 复合写法
属性的顺序 是可以随意调换的
第一次出现的时间 是持续时间
第二次出现的时间 是延迟时间
如果只写了一个时间 默认就是 持续时间
*/
/* animation: toright 1s 2s linear infinite ; */
/* animation: linear  infinite 1s 2s    toright; */
animation: linear  1s 2s    stepAnimation;
}

@keyframes stepAnimation{
/* 起始状态 */
0%{

}
/* 动画的一半 移动到屏幕的 最右边 */
50%{
transform: translateX(1000px);
}
/* 返回到起始的位置 */
100%{
transform: translateX(0);
}
}