CSS动画详解及transform、transition、translate的区别
刚看完一节慕课网的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的区别的更多相关文章
- css 12-CSS3属性详解:动画详解
12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...
- [转]Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法
转载:http://blog.csdn.net/harvic880925/article/details/39996643 前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的 ...
- [转]超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordp ...
- [转] ReactNative Animated动画详解
http://web.jobbole.com/84962/ 首页 所有文章 JavaScript HTML5 CSS 基础技术 前端职场 工具资源 更多频道▼ - 导航条 - 首页 所有文章 ...
- Android中的动画详解系列【4】——Activity之间切换动画
前面介绍了Android中的逐帧动画和补间动画,并实现了简单的自定义动画,这一篇我们来看看如何将Android中的动画运用到实际开发中的一个场景--Activity之间跳转动画. 一.定义动画资源 如 ...
- Android Animation动画详解(二): 组合动画特效
前言 上一篇博客Android Animation动画详解(一): 补间动画 我已经为大家介绍了Android补间动画的四种形式,相信读过该博客的兄弟们一起都了解了.如果你还不了解,那点链接过去研读一 ...
- CSS选择器详解(伪类) 转 http://blog.csdn.net/Panda_m/article/details/50084699
CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...
- css filter详解
css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...
- JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
随机推荐
- jdk1.8 对数组及arrays类对数组的操作与增强
数组的初始化有两种方式 静态初始化: 初始化时由程序员显示置顶每个数组的初始值,由系统决定数组长度.如: int[] a1 = new int[] {1,2,3,4}; 动态初始化:初始化时由程序员只 ...
- python 替换指定目录下,所有文本字符串
网页保存后,会把js文件起名为.下载,html里面的引用也会有,很不美观,解决方案:用python替换字符串 import os import re """将当前目录下所 ...
- 使用 Azure CLI 2.0 从自定义磁盘创建 Linux VM
本文说明如何在 Azure 中上传自定义的虚拟硬盘 (VHD) 或复制现有 VHD,并从自定义磁盘创建 Linux 虚拟机 (VM). 可以根据要求安装并配置 Linux 分发版,并使用该 VHD 快 ...
- Log4net (Log for .net)
Log4net (Log for .net) 开源的记录日志的组件,是从java的Log4J移植到.net 日志文件存放的位置 在项目新建“App_Code”和“App_Data”,该文件夹客户端无法 ...
- 【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 ...
- 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 ...
- 关于Hibernate的报错org.hibernate.MappingException: Unknown entity
部分异常,如下 org.hibernate.MappingException: Unknown entity: com.zcd.hibernate.oneToMany.Teamat org.hiber ...
- ThreadLocal介绍
作者:知乎用户链接:https://www.zhihu.com/question/23089780/answer/62097840来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...
- Linux硬盘扩容
1.安装gparted分区工具 2.从虚拟机设置新的虚拟硬盘 3.挂载分区 sudo mount -t ext4 /dev/sdb1 /home/zhoushuo/zsdf -hsudo chmod ...
- ORACLE查询删除重复记录
比如现在有一人员表 (表名:peosons) 若想将姓名.身份证号.住址这三个字段完全相同的记录查询出来 复制代码 代码如下: select p1.* from persons p1,pers ...