css3中trastion,transform,animation基本的了解
毕业答辩一耽误就是一个月的时间,感觉自己浪费好多时间,而且学习劲头都没有以前的好,学习是个漫长艰苦的事情,也出现了好多问题,希望自己有则改之,无则加冕,曾国藩曾说过:悔者,所以守其缺而禾取求全也。虽然有遗憾有不足,也希望自己能够不断完善自身及修养。(对了还有个问题找一个时间,每天自己学习新的知识)。
进入正题吧
trasition(过渡)
根据中文意思过渡,就会想到,无论你是点击,焦点等事件,它是平滑改变其属性。
trasiton属性是复合属性,trasition(property duration timing-function delay );
- transition-property :规定设置过渡效果的css属性名称;子属性包含三个值:no没有属性名,all所有属性获得过渡效果,property定义css属性名;
- transition-duration :规定完成过渡效果需要多少秒或毫秒(time);
- transition-timing-function :指定过渡函数,规定速度效果的速度曲线time(子属性具体属性如下);
- transition-delay :指定开始出现的延迟时间(time);
默认值分别为:all 0 ease 0 ;
注:transition-duration 时长为0,不会产生过渡效果;
transition-timing-function是transition中让人有疑惑的地方,说一下记住就好。
linear规定以相同速度开始至结束的过渡效果。
ease规定慢速开始,然后变快,然后慢速结束的过渡效果。
ease-in规定以慢速开始的过渡效果。
ease-out规定以慢速结束的过渡效果。
ease-in-out规定以慢速开始和结束的过渡效果.
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transform变换
transform主要分5类的值。转换,缩放,旋转,倾斜,透视。在JavaScript中语法是这样的object.style.transfrom=值
值都有这些
转换:matrix(n.n.n.n.n.n)定义2D转换,6个值得矩阵
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义3D转换,16个值得4X4矩阵
translate(x,y)定义2D转换
translate3d(x,y,z)定义3D转换
translateX(x)转换只用于x轴
translateY(y)转换只用于y轴
translateZ(z)转换只用于z轴
缩放 :scale(x,y)定义2D缩放
scale3d(x,y,z)定义3D缩放
scaleX(x)通过x轴的值来进行缩放
scaleY(y)通过y轴的值来进行缩放
scaleZ(z)通过z轴的值来进行缩放
旋转:rotate(angle)定义2D旋转
rotate3d(x,y,z,angle)定义3D旋转
rotateX(angle)定义沿X轴进行旋转
rotateY(angle)定义沿y轴进行旋转
rotateZ(angle)定义沿z轴进行旋转
倾斜:skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skew(x-angle)定义沿着 X 轴的 2D 倾斜转换。
skew(y-angle)定义沿着 Y 轴的 2D 倾斜转换。
透视:perspective(n)为 3D 转换元素定义透视视图。
animation动画
语法: animation: name duration timing-function delay iteration-count direction;
animation-name:规定需要绑定到选择器的 keyframe 名称。
animation-duration:规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-funcition:规定动画的速度曲线.
animation-delay:规定在动画开始之前的延迟。
animation-iteration-count:规定动画应该播放的次数。
animation-direction:规定是否应该轮流反向播放动画。
css3中trastion,transform,animation基本的了解的更多相关文章
- css3中transition和animation的回调处理
弱鸡最近在准备面试,网上找了一些题,发现一些基础题也完全答不好(┬_┬)看来还是要再接再励啊w(゚Д゚)w 言归正传,今天的主题是CSS3中的动画回调处理,这里动画执行完毕后触发的事件是transit ...
- CSS3中动画transform必须要了解的Skew变化原理
transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同的变化.今天我们来了解skew的变化原理. skew,其实使用的频率不是很高,当然也没有最低.但是往往,一直 ...
- CSS3中的transform变形
在CSS3中,用Transform功能可以实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形,这四种变形分别使用rotate.scale.skew和translate这四种方法来实现.将这四种变形 ...
- 对CSS3中的transform:Matrix()矩阵的一些理解
只要有CSS基础的人肯定都知道,我们可以通过transform中的translate,scale,rotate,skew这些方法来控制元素的平移,缩放,旋转,斜切,其实这些方法呢都是为了便于开发者使用 ...
- css笔记——区分css3中的transform transition animation
出处:http://blog.csdn.net/dyllove98/article/details/8957232 CSS3中和动画有关的属性有三个 transform. transition ...
- css3中的transform、transition、translate、animation(@keyframes)的区别
一.前言 在CSS中,我们经常会使用到transform.transition.translate.animation(@keyframes)这些长得相似,又不好区分的属性(值).每当需要使用它们,都 ...
- [CSS3备忘] transform animation 等
一些CSS不经常用就会忘记,好吧,现在整理再学习一下,也留做备忘,方便以后查看... perspective的理解: 1.数值越小,用户与3D空间Z平面距离越近,视觉效果更令人印象深刻(比如看电影,越 ...
- CSS3中的transform
CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. transform 在2D里主要是4个方法.除了rotate 其他都是接受x y值 translate skew rotate sca ...
- css3中有关transform的问题
Transform属性应用于元素的2D或3D转换.这个属性允许你将元素旋转,缩放,移动,倾斜等.
随机推荐
- 类自动调用to.string方法
所有对象都有toString()这个方法,因为它是Object里面已经有了的方法,而所有类都是继承Object,所以“所有对象都有这个方法” 它通常只是为了方便输出,比如System.out.prin ...
- Docker安装准备
第一次写作下笔记: 以centos6.5安装yum优先级插件 yum install yum-priorities 1.epel简介: https://fedoraproject.org/wiki/E ...
- P4312 [COCI 2009] OTOCI / 极地旅行社
思路 LCT维护和的板子 注意findroot的时候要先access一下,修改点权之前要先splay到根 代码 #include <cstdio> #include <algorit ...
- python链接Hive
之前一直用thrift链接Hive,但在运行时总出现问题,一直报缺少模块的错误,装了这个模块,又报缺少那个模块,连了半天,全是泪啊! 原来thrift链接Hive的.py文件后续没人维护,是连不上的. ...
- 获取添加数据的自增ID
$id= DB::select("select auto_increment from information_schema.`TABLES` where table_name='stude ...
- android --------- 嵌套unity出现 your hardware does not support this application,sorry!
最近遇见一个这个的问题 ,我在Android端接入Unity3D时出现的问题 问题是打开app直接弹出下面的弹框 点击ok 就退出了 遇到这样的问题 是因为libs文件夹的so文件出现了问题: 解决办 ...
- 学习GT一书前九章的体会
学习Gilbarg和Trudinger一书前九章的体会 本书第二章,调和函数的基本性质进行展示.特别的对比较定理有深刻的阐述以及Perron方法的基本说明,并对Wiener准则作了简要说明. 第三章的 ...
- jQuery.ready() 函数详解
jQuery.ready() 函数详解 ready()函数用于在当前文档结构载入完毕后立即执行指定的函数. 该函数的作用相当于window.onload事件. 你可以多次调用该函数,从而绑定多个函数, ...
- 001——使用composer安装ThinkPHP5
composer create-project topthink/think tp5 --prefer-dist
- 聊一聊啥都不会的我自学Linux系统的历程
Linux大家都不陌生,我是在大三的时候开始接触Linux,上课的时候一位给我们上课的老师闲聊的时候说,你们计算机专业的学生要好好去学Linux,对于你们以后发展或者是就业都很有帮助. 开始的时候是一 ...