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: 动画名称 持续时间 动画类型 延迟时间 循环次数 循环中是否反向 动画结束时的状态;

}