transition :   平衡过渡

transition是一种css里的一种过渡效果,完成过渡需要多少秒 。延迟几秒开始 ,过渡的速度(一般有 "linear 匀速"  和“ease 先慢后快再慢结束”及“cubic-bezier(n,n,n,n) 自己定义的值,可能的值是 0 至 1 之间的数值”等)

一般transition通过鼠标事件触发 ,如(hover)产生动画效果

animation: 动画

animation 一般通过@keyframes 规则,创建动画。

animation通过关键帧的名称 开始的时间 动画的速度(和上一致外还有一个step-end逐帧播放)是否重复播放(infinite)

进行根据需求进行修改即可

animation一般通过@keframes关键帧的规则来创建动画,可以通过关键字"from"和“to”,或者通过自己定义的百分比进行动画 0%是开始100%是结束

一般在关键帧要进行多个动画效果一般使用百分比 0%和100%之间可以根据自己的要求在分成20%,40%,60%或在细分等

transform: 改变元素的大小、位置

translate:移动

translate(x,y) 定义2D空间

translate(x,y,z) 定义3D空间

这个的移动值可以使用像素px支持负值

scale:放大

scale(数值)定义图片放几倍大(0为不显示,1则是图片原本的大小)

(为放大1.3倍)

rotate:旋转

rotate(x,y)  定义2D空间

rotate(x,y,z)  定义3D空间

这个的旋转值使用deg 旋转了多少度,支持负值

改变旋转点使用“transform-origin”来改变旋转的原点,如把旋转点定在顶部的中心点

skew :倾斜(扭曲)

skew(x,y)  定义2D空间

skew(x,y,z)  定义3D空间

最新文章

  1. 数据库 数据库SQL语句二
  2. MSSQLServer中组织或分类表的设计及其递归查询
  3. xib的UIScrollView自适应高度
  4. B. Checkout Assistant 01背包变形
  5. JSON字符串解析
  6. 【LintCode】链表求和
  7. angular的post请求,SpringMVC后台接收不到参数值的解决方案
  8. log4net.config
  9. cookie 暂时保存内容与恢复
  10. .NET 中的DateTime
  11. (译) Angular运行原理揭秘 Part 1
  12. ubuntu server 安装
  13. Android之EditText组件学习
  14. Android 颜色渲染(四) BitmapShader位图渲染
  15. C#后台发送HTTP请求
  16. OpenCV——Delaunay三角 [转载]
  17. 命令行启动Hololens Emulator,可解决内存不足的问题
  18. ATCA构架
  19. 201421123042 《Java程序设计》第5周学习总结
  20. 【34】包含min函数的stack

热门文章

  1. axios 模拟同步请求
  2. [LC] 348. Design Tic-Tac-Toe
  3. 吴裕雄--天生自然 JAVA开发学习:文档注释
  4. Seikimatsu Occult Tonneru(网络流,状态数(建不建边)不多时,可考虑直接进行枚举
  5. npm基本语法
  6. 63)PHP,登录验证
  7. JwtUser JwtAuthenticationEntryPoint JwtAuthorizationTokenFilter JwtUserDetailsService AuthenticationController
  8. [Python] 使用Python 3 下载麦子学院视频
  9. deepin 更改默认网卡名称为eth和wlan
  10. 简单说说PHP优化