transform ,transition, @keyframe animantion 对比
2015-06-19 10:08
323 查看
1.transform:对元素自身的改变。包括:
平移:translate(X/Y)
翻转:rotate(20deg)
缩放:scale(X/Y)
倾斜/透视:skew(..)
2.transiton:对元素css样式的改变(width,height,opacity。。。。),有动效, 包含起始和终止两个状态。
transition有四个属性,transition-property transition-duration transition-timing-function transition-delay
transition: width 2s linear 1s
3.@keyframe annimation 顾名思义,类似于flash动画,定义了一组关键帧,也就是几个状态。每个状态可以包含多个css样式
如: @keyframes mymove{
平移:translate(X/Y)
翻转:rotate(20deg)
缩放:scale(X/Y)
倾斜/透视:skew(..)
2.transiton:对元素css样式的改变(width,height,opacity。。。。),有动效, 包含起始和终止两个状态。
transition有四个属性,transition-property transition-duration transition-timing-function transition-delay
transition: width 2s linear 1s
3.@keyframe annimation 顾名思义,类似于flash动画,定义了一组关键帧,也就是几个状态。每个状态可以包含多个css样式
如: @keyframes mymove{
0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;} } 以上均为css3样式,所以实际使用时注意兼容性。
相关文章推荐
- 输入个人信息按年龄大小排列
- node.js及相关组件安装
- kalman滤波
- 怎样在Xcode 6中使用矢量图形
- Linux read系统调用
- struts2核心和工作原理
- 建立删除不掉的文件夹
- POJ 1664 放苹果
- Linu下安装php及测试
- 51cto给了我事业的目标
- 游戏引擎开发之音乐播放(一)
- storm入门原理
- eclipse 安装jetty插件
- GetAdaptersInof获取本地连接的网卡信息,排除无线网卡和虚拟网卡
- 给Sublime text2安装Zen Coding插件
- 基础学习总结(六)--getContentRolver()的应用、内容监听者ContentObserver
- git命令
- 郭德纲语录
- BeanUtils
- 按分类 统计各分类下的记录数