css:transform,transition,animation总结
1. transform 2d
名称 | 说明 |
---|---|
transform | 变形功能 |
transform-orign | 指定变换起点 |
1.1 transform的属性值
名称 | 说明 | 参数 |
---|---|---|
translate/translateX/translateY | 平移 | 长度值或百分数 |
scale/scaleX/scaleY | 缩放 | 数值 |
rotate | 旋转 | 角度 |
skew | 倾斜 | 角度 |
matrix | 矩阵 | 略 |
例子:
transform: translateX(100px);transform: translateX(50%);transform: scale(2);transform: scale(0.5);transform: rotate(45deg);顺时针transform: skew(45deg,45deg);// 水平方向(0-90有意义) 竖直方向(0-90有意义)
附skew资料:CSS3 transform matrix矩阵与拉伸实例页面
多重效果并行:只是效果,没有过程,不存在线行:
transform: scale(0.5) rotate(45deg);
1.2 transform-orign
默认是中心点。可以设其他值。第一个参数是x轴,其值可以是left,center,right,也可以是百分数。第二个参数是y轴,其值可以是top,center,bottom,也可以使百分数。
例子:
transform-origin: 0 0;
transform-origin: left top;
transform-origin: 50% 50%;
2. transform 3d
名称 | 说明 |
---|---|
transform-style | 展现样式(flat/perserve3d) |
perspective | 指定变换起点 |
2.1 transform
3d就是多了一个z轴。transfrom的属性值比2d多以下:
名称 | 说明 | 参数 |
---|---|---|
translate3d(x,y,z)/translateZ(z) | 平移 | 长度值或百分数 |
scale3d(x,y,z)/scaleZ(z) | 缩放 | 数值 |
rotateX(x)/rotate(y)/rotateZ(z) | 旋转 | 角度 |
matrix3d | 矩阵 | 略 |
2.2 transform-style
指定嵌套元素如何在3d空间呈现。
名称 | 说明 |
---|---|
flat | 2d屏幕 |
preserve-3d | 3d屏幕 |
2.3 perspective
指眼睛距离3d元素的距离。
名称 | 说明 |
---|---|
none | 默认值,表示无限的角度来看 3D 物体,但看上去是平的 |
长度值 | 接受一个长度单位大于0的值,其单位不能为百分比。值越大,角度出现的越远,就好比你人离远一点看物体。值越小,正相反。 |
2.4 perspective-origin
变型基点,同transform-origin
例子:
p{width: 200px;height: 200px;background-color: gray;
}
p.b{transform: translate3d(100px,100px,-200px);
}
div{perspective: 1000px;transform-style: preserve-3d;
}
<div><p class="b"></p>
</div>
3. transition
过渡效果一般是通过一些简单的 CSS 动作触发平滑过渡功能,比如: :hover、 :focus、
:active、:checked 等。CSS3 提供了 transition 属性来实现这个过渡功能,主要属性如
下表:
名称 | 说明 | 参数 |
---|---|---|
transition-property | 指定CSS 属性 | none,all,指定属性 |
transition-duration | 所需时间 | 1s,2s |
transition-timing-function | 过程函数 | ease,linear,ease-in,ease-out,ease-in-out |
transition-delay | 延时 | 1s,2s |
transition | 以上四种简写 |
没有过渡效果的例子:
div{width: 200px;height: 200px;background-color: maroon;color: gray;
}
div:hover{background-color: green;color: white;
}<div><h1>hello world</h1></div>
加上过度效果:
div{width: 200px;height: 200px;background-color: maroon;color: gray;transition-property: all;transition-duration: 2s;transition-timing-function: ease;
}
简写形式:
transition: all 2s ease;
名称 | 说明 |
---|---|
linear | 元素样式从初始状态过渡到终止状态速度是恒速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) |
ease | 默认值,元素样式从初始状态过渡到终止状态时速度由快到慢,逐渐变慢。等同于贝塞尔曲线(0.25, 0.1,0.25, 1.0) |
ease-in | 元素样式从初始状态过渡到终止状态时,速度越来越快,呈一种加速状态。等同于贝塞尔曲线(0.42, 0,1.0, 1.0) |
ease-out | 元素样式从初始状态过渡到终止状态时,速度越来越慢,呈一种减速状态。等同于贝塞尔曲线(0, 0, 0.58,1.0) |
linear | 元素样式从初始状态过渡到终止状态速度是恒速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) |
ease-in-out | 元素样式从初始状态过渡到终止状态时,先加速,再减速。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) |
4. animation
CSS3 提供了类似 Flash 关键帧控制的动画效果,通过 animation属性实现。那么之前的 transition属性只能通过指定属性的初始状态和结束状态来实现动画效果,有一定的局限性。
animation 实现动画效果主要由两个部分组成:
1.通过类似 Flash 动画中的关键帧声明一个动画;
2.在 animation 属性中调用关键帧声明的动画。
名称 | 说明 |
---|---|
animation-name | 用来指定一个关键帧动画的名称,这个动画名必须对应一个@keyframes规则。CSS 加载时会应用 animation-name 指定的动画,从而执行动画。 |
animation-duration | 用来设置动画播放所需的时间 |
animation-timing-function | 用来设置动画的播放方式 |
animation-delay | 用来指定动画的延迟时间 |
animation-iteration-count | 用来指定动画播放的循环次数 |
animation-direction | 用来指定动画的播放方向 |
animation-play-state | 用来控制动画的播放状态 |
animation-fill-mode | 用来设置动画的时间外属性 |
animation | 以上的简写形式 |
代码:
@keyframes anim {0%,100% {background-color: maroon;color: gray;}50% {background-color: black;color: white;}
}
div{width: 200px;height: 200px;background-color: maroon;color: gray;
}
div:hover{animation-name: anim;animation-duration: 5s;
}<div><h1>hello world</h1></div>
或者:
@keyframes anim {from {background-color: maroon;color: gray;}to {background-color: black;color: white;}
}
简写:
animation: anim 5s ease;
css:transform,transition,animation总结相关推荐
- css3的新特性transform,transition,animation
一.transform css3引入了一些可以对网页元素进行变换的属性,比如旋转,缩放,移动,或者沿着水平或者垂直方向扭曲(斜切变换)等等.这些的基础都是transform属性 transform属性 ...
- CSS3 新特性transform,transition,animation
一.transform css3引入了一些可以对网页元素进行变换的属性,比如旋转,缩放,移动,或者沿着水平或者垂直方向扭曲(斜切变换)等等. transform属性有一项奇怪的特性,就是它们对于其周围 ...
- css3动画模块transform transition animation属性解释
首先来看下对各大浏览器的兼容性 IE Firefox Safari Chrome Opera CSS 2D Transform no 3.5 3.2 2.0 10.5 CSS 3D Transfo ...
- css3之transition、transform、animation比较
css3动画多少都有些了解,但是对于transition.transform.animation这几个属性一直是比较模糊的,所以啊,这里做一个总结,也希望大家都可以对此有一个更好地理解. 其实, ...
- css动画详解 (transition animation)
属性 transition(4个属性): transition: width 5s ease 3s; /*简写*/transition-property: width; /*过渡属性名*/transi ...
- 前端动画大全:css的transition、css3的animation、Jquery的animate、js的setInterval
前端制作动画的几种方式(css3,js,jquery) 制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总 ...
- No.3 - CSS transition 和 CSS transform 配合制作动画
课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...
- CSS动画(animation)详解
CSS动画(animation)详解 通过<CSS过渡>一节的学习我们知道,利用 transition 属性可以实现简单的过渡动画,但过渡动画仅能指定开始和结束两个状态,整个过程都是由特定 ...
- CSS vs. JS Animation: 哪个更快
CSS vs. JS Animation: 哪个更快? CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且 ...
最新文章
- 近两年的生物医学突破研究,颠覆你前20年基础所学
- javascript 请求action传递中文参数乱码问题
- ganglia安装与配置
- html DOCUMENT
- 简单页面跳转生命周期(简单清晰)
- Java 高级—— IO 基础
- 关闭TCP连接的学问
- 【ES6(2015)】Generator
- Flex的TabNavigator中tab触发的事件
- 【原创】MySQL Proxy - 协议(部分摘录)
- 当浙江“十万企业上云“遇见中国软件生态大会
- SpringBoot启动报jdbc连接池错误
- 大龄程序员找工作,为什么这么难?能力与年龄不匹配
- python培训班时间 费用-python培训班要多少钱?
- DataV(对象类)未来三天天气状态显示对应图标,格式:{ “results“:[ { “location“:{},“daily“:[ {},{}] ] }
- vue3.0父传子,父传孙,子传孙,孙传父,孙传子的传值
- java虚拟机内存查看相关命令
- Angular 5 整合容联云 即时通讯
- ThreadPoolExecutor 线程池的使用
- VC++实现的基于人眼状态的疲劳驾驶识别系统
热门文章
- PHP字符串替换函数strtr()的功能实现讲解
- for循环、while循环、break跳出循环、continue结束本次循环、exit退出脚本
- Apache 配置SSL网站
- jQuery EasyUI API 中文文档 - ValidateBox验证框
- 虚拟化架构下虚拟交换机和分布式虚拟交换机解析
- android UI进阶之仿iphone的tab效果
- PTA:图的理论习题集
- 大数据如何更好进行分析
- 中琛物联‘连接+云+数据’服务助阵
- JavaScript 自定义对象 及 new()原理与实现 如何完整地手写实现new