css3 动画

css 3 动画

css3 与动画相关的

1. transitions

• transition-property: height; //指定过渡的性质
• transition-duration: 0.5s; //过渡的持续时间
• transition-delay: 0.5s; //延迟过渡时间
• transition-timing-function: ease-in // 指定过渡类型

2. transforms

• skew(50deg) ; //倾斜
• rotate(90deg); //旋转
• scale(0.5,0.5); //缩放
• translate(10px , 20px); // 偏移

transform-origin : 10% 20%; // 设置旋转的中心

3. animation

这个只有webkit的内核支持

@-webkit-keyframes fadeInOut {
    0% {
	opacity:1;
     }
    25% {
	opacity:0;
    }
    50% {
	opacity: 0;    
    }
    75% {
	opacity:1;
    }
}
.anim_fade_image {
    -webkit-animation-name: fadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;  //播放次数 n, infinite 代表无限次
    -webkit-animation-duration: 12s;
    -webkit-animation-direction: alternate;  // normal, alternate  是否反向播放
}