CSS3动画 transition和animation的用法和区别
2015-06-27 12:50
711 查看
transition和animation都是CSS3新增的特性,使用时需要加内核
区别:
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: 动画名称 持续时间 动画类型 延迟时间 循环次数 循环中是否反向 动画结束时的状态;
}
浏览器 | 内核名称 |
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: 动画名称 持续时间 动画类型 延迟时间 循环次数 循环中是否反向 动画结束时的状态;
}
相关文章推荐
- 不容错过的17款面向CSS开发人员的实用框架及工具
- CSS兼容的几个点
- CSS3动画-动画
- devexpress实现单元格根据条件显示不同的样式(颜色、字体、对齐方式,大小等)
- CSS3动画-过渡
- web页面div浮于图片上的问题
- CSS3动画-2D、3D转换
- css3快速复习
- css--用户体验笔记及兼容记录
- js获取、修改CSS样式
- css3 事件触发动画 可重复播放
- Enable CSS active pseudo styles in Mobile Safari
- css常用hack
- 模拟 安卓 Toast 提示, CSS3 19种特效随意挑
- QWidget 直接派生类的样式表不起作用的解决办法
- 常见的css3缩放效果
- CSS 最全面的水平垂直居中方案
- CSS 伪类、伪元素、选择器的使用
- 调用css时,用link 和 @import url 有什么区别
- 图文理解css浮动