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  是否反向播放
}
posted @ 2017-04-05 22:46  小明DDD  阅读(114)  评论(0编辑  收藏  举报