刚看完一节慕课网的css动画,在此总结下

1. 先说下 transform、transition、translate的区别

  transform 和 transition是css的2个属性,translate属于transform里的一个方法;

2.语法:

transform有4个方法,分别是translate平移、rotate旋转、scale缩放、skew斜切

transition有4个值(默认是前2个值):property(指定css属性的name)、duration(动画持续时间)、timing-function(切换动画的速度)、delay(动画执行前的延迟时间)

3. 用法:

  • translate有2个参数,代表x轴和y轴, 只有1个参数时,只在x轴移动,y轴默认是0;transform: translate(10px,10px)

    -ms-transform:translate(x,y);       /*IE9*/ 
    -moz-transform:translate(x,y);     /*Firefox*/
    -webkit-transform:translate(x,y);  /*Safari和chrome*/
    -o-transform:translate(x,y);          /*Opera*/

  • rotate(1800deg)参数值为正数顺时针旋转,值为负数逆时针旋转; transform:rotate(90deg)
  • transform-origin:0 0 ; 设置旋转的中心点 ,默认是(0,0)
  • scale(x,y)  x轴和y轴缩放,第二个参数没有默认取第一个参数的值,scale(0.5)参数值小于1缩小,scale(1.5)参数值大于1放大; transform:scale(1.2)
  • skew(x,y) 斜切 用法和rotate类似,在x轴和y轴同时进行角度扭曲,第二个参数没有时默认为0,不进行斜切; transform: skew(90deg,10deg)

    skew一般不建议使用,可以用 skewX(值) 和 skewY(值) ,但是skew(x,y)的效果不等于skewX加上skewY的效果。

    skewX(xdeg), 表示在x轴倾斜的度数,如果度数为正,表示元素沿水平方向(X轴)顺时针倾斜;如果度数为负,表示元素沿水平方向(X轴)逆时针倾斜

    skewY(ydeg)类似

    这个属性不太好理解,总结一下就是

      (1)skewX()方法会保持高度,沿着X轴倾斜;

      (2)skewY()方法会保持宽度,沿着Y轴倾斜;

      (3)skew(x,y)方法会先按照skewX()方法倾斜,然后按照skewY()方法倾斜;

  • transition-property: none| all | property ;  all表示所有属性都有过渡效果,property定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔
  • transition-duration: time值;默认是0 没有动画效果,以秒或者毫秒计
  • transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

   

/* transition: width|height|opacity|all  2s  ease-in 2s  ;      property和duration是必须值,后2个参数可以省略*/

 4. transform的4个方法叠加使用时,先做偏移,在做其他

  transform: translateX(100%)  scale(0.5);

5. 景深

  perspective: 80px;

值越小,代表的是我们离物体越近,一般使用500-800;

CSS动画详解及transform、transition、translate的区别的更多相关文章

  1. css 12-CSS3属性详解:动画详解

    12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...

  2. [转]Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法

    转载:http://blog.csdn.net/harvic880925/article/details/39996643 前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的 ...

  3. [转]超级强大的SVG SMIL animation动画详解

    超级强大的SVG SMIL animation动画详解 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordp ...

  4. [转] ReactNative Animated动画详解

    http://web.jobbole.com/84962/     首页 所有文章 JavaScript HTML5 CSS 基础技术 前端职场 工具资源 更多频道▼ - 导航条 - 首页 所有文章 ...

  5. Android中的动画详解系列【4】——Activity之间切换动画

    前面介绍了Android中的逐帧动画和补间动画,并实现了简单的自定义动画,这一篇我们来看看如何将Android中的动画运用到实际开发中的一个场景--Activity之间跳转动画. 一.定义动画资源 如 ...

  6. Android Animation动画详解(二): 组合动画特效

    前言 上一篇博客Android Animation动画详解(一): 补间动画 我已经为大家介绍了Android补间动画的四种形式,相信读过该博客的兄弟们一起都了解了.如果你还不了解,那点链接过去研读一 ...

  7. CSS选择器详解(伪类) 转 http://blog.csdn.net/Panda_m/article/details/50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  8. css filter详解

    css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...

  9. JSX设置CSS样式详解

    JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...

随机推荐

  1. jdk1.8 对数组及arrays类对数组的操作与增强

    数组的初始化有两种方式 静态初始化: 初始化时由程序员显示置顶每个数组的初始值,由系统决定数组长度.如: int[] a1 = new int[] {1,2,3,4}; 动态初始化:初始化时由程序员只 ...

  2. python 替换指定目录下,所有文本字符串

    网页保存后,会把js文件起名为.下载,html里面的引用也会有,很不美观,解决方案:用python替换字符串 import os import re """将当前目录下所 ...

  3. 使用 Azure CLI 2.0 从自定义磁盘创建 Linux VM

    本文说明如何在 Azure 中上传自定义的虚拟硬盘 (VHD) 或复制现有 VHD,并从自定义磁盘创建 Linux 虚拟机 (VM). 可以根据要求安装并配置 Linux 分发版,并使用该 VHD 快 ...

  4. Log4net (Log for .net)

    Log4net (Log for .net) 开源的记录日志的组件,是从java的Log4J移植到.net 日志文件存放的位置 在项目新建“App_Code”和“App_Data”,该文件夹客户端无法 ...

  5. 【Leetcode】【Medium】Partition List

    Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...

  6. sql with 写法

    with h_asign_id as ( select asign_id from assign_h h left join assignment a on a.id = h.asign_id whe ...

  7. 关于Hibernate的报错org.hibernate.MappingException: Unknown entity

    部分异常,如下 org.hibernate.MappingException: Unknown entity: com.zcd.hibernate.oneToMany.Teamat org.hiber ...

  8. ThreadLocal介绍

    作者:知乎用户链接:https://www.zhihu.com/question/23089780/answer/62097840来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  9. Linux硬盘扩容

    1.安装gparted分区工具 2.从虚拟机设置新的虚拟硬盘 3.挂载分区 sudo mount -t ext4 /dev/sdb1 /home/zhoushuo/zsdf -hsudo chmod ...

  10. ORACLE查询删除重复记录

     比如现在有一人员表 (表名:peosons) 若想将姓名.身份证号.住址这三个字段完全相同的记录查询出来 复制代码 代码如下: select p1.*   from persons  p1,pers ...