CSS3动画 transition和animation的用法和区别

transition和animation都是CSS3新增的特性,使用时需要加内核

浏览器 内核名称
W3C  
IE  -ms-
 Chrome/Safari -webkit- 
 Firefoc -moz- 
 opera -o- 

 

 

 

 

 

 

区别:

transition是过度属性,需要用户自行触发,触发时间比如:点击,鼠标悬浮等

animation是动画属性,其不需要用户触发,网页加载完成后自动执行

使用:

transation{过度属性 过度时间 动画类型 延迟时间}

-o-transation{过度属性 过度时间 动画类型 延迟时间}

-ms-transation{过度属性 过度时间 动画类型 延迟时间}

-moz-transation{过度属性 过度时间 动画类型 延迟时间}

-webkit-transation{过度属性 过度时间 动画类型 延迟时间}

 

@keyframes 动画名称{

  0%{css属性列表}

  ......

  100%{css属性列表}

}

@-o-keyframes 动画名称{

  0%{css属性列表}

  ......

  100%{css属性列表}

}

@-ms-keyframes 动画名称{

  0%{css属性列表}

  ......

  100%{css属性列表}

}

@-moz-keyframes 动画名称{

  0%{css属性列表}

  ......

  100%{css属性列表}

}

@-webkit-keyframes 动画名称{

  0%{css属性列表}

  ......

  100%{css属性列表}

}

 

div{

  animation: 动画名称 持续时间 动画类型 延迟时间 循环次数 循环中是否反向 动画结束时的状态;

  -o-animation: 动画名称 持续时间 动画类型 延迟时间 循环次数 循环中是否反向 动画结束时的状态;

  -ms-animation: 动画名称 持续时间 动画类型 延迟时间 循环次数 循环中是否反向 动画结束时的状态;

  -moz-animation: 动画名称 持续时间 动画类型 延迟时间 循环次数 循环中是否反向 动画结束时的状态;

  -webkit-animation: 动画名称 持续时间 动画类型 延迟时间 循环次数 循环中是否反向 动画结束时的状态;

}

 

posted @ 2015-06-27 12:50 caoruiy 阅读(...) 评论(...) 编辑 收藏