CSS-Transform-transition-Animation

Transform

  根据我的理解,transform和width、height、background一样,都是dom的属性,不同的是它是css3旗下的,比较屌,能够对原来的dom元素进行移动、缩放、转动、拉长或拉伸,跟canvas上的某些api神似,这么说来transform好像能干些js才能干的事。

  transform分2D变换和3D变换,w3school中有很好的介绍和例子

 

Transition

注意:在变换属性时,变换前的属性值必须定义;不然会没有效果;

例:想让width从   100px  --->  200px  时,前边的100px必须指明。主要用在    img   的 宽高是要注意

  transition的解释是过渡,我的理解是css之间的变换,但是这个变换很屌很平滑,类似动画。举个栗子,一开始某个dom的类是classA,通过某种操作(比如被点击了)后变成了classB,如果没有transition,类之间的变换是很快的,机械般瞬间完成,但是有了transition,这便会是一个很缓和平滑的过程。

transition有4个属性:语法:transition: property duration timing-function delay  从前到后4个属性依次可理解成“过渡动画变换的属性”、“过渡花费时间”、“过渡过程的速度变化”和“过渡开始前的等待时间”(默认值:all 0 ease 0 前两个是必须的 后两个可省略)。

过渡属性:

属性描述CSS
transition简写属性,用于在一个属性中设置四个过渡属性。3
transition-property规定应用过渡的 CSS 属性的名称。3
transition-duration定义过渡效果花费的时间。默认是 0。3
transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。3
transition-delay规定过渡效果何时开始。默认是 0。3

Animation

  Animation的解释是动画,加强版的transition。

  如果说transition能实现某些js效果,animation就更像是js了。类似于写一个canvas特效,特效总共比如说多少时间,我们能规定在什么时候该出现什么样的场景,而各个场景间的转换则完全由css3本身负责,而keyframes好比定义了一个js方法。

   主要应用在某个元素需要进行连续的n次css变换。

动画属性:

属性描述CSS
@keyframes规定动画。3
animation所有动画属性的简写属性,除了 animation-play-state 属性。3
animation-name规定 @keyframes 动画的名称。3
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
animation-timing-function规定动画的速度曲线。默认是 "ease"。3
animation-delay规定动画何时开始。默认是 0。3
animation-iteration-count规定动画被播放的次数。默认是 1。3
animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。3
animation-play-state规定动画是否正在运行或暂停。默认是 "running"。3
animation-fill-mode规定对象动画时间之外的状态。3

转载于:https://www.cnblogs.com/xuange306/p/4627052.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/492075.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nature今发表脑机接口领域重大突破:

来源:学术经纬摘要:将计算机连通人脑,直接读取意识,这不是科幻。顶尖学术期刊《自然》刚刚在线发表的一项工作就在脑机接口领域向前迈出了一大步。加州大学旧金山分校(UCSF)的神经外科学家Edward Chang教授…

C语言中的自定义类型

C语言中的自定义类型 (一)结构体 结构体的声明 结构体是一些值的集合,这些值称为成员变量,结构体的成员可以是不同类型的变量;结构体的声明 struct tag { member-list; }variable-list;特殊声明 在声明结构体的时候…

2019版中国数字经济发展与就业白皮书

未来智能实验室是人工智能学家与科学院相关机构联合成立的人工智能,互联网和脑科学交叉研究机构。未来智能实验室的主要工作包括:建立AI智能系统智商评测体系,开展世界人工智能智商评测;开展互联网(城市)云…

文件即子文件删除

先简单说明一些基本:(下面所说的文件夹也就是目录,我个人一开始不知道目录是什么,后来才知道目录就是文件夹)。 1.首先介绍delete()方法的基本用法。 先创建一个File对象 ,例如: File file new…

深入卷积神经网络背后的数学原理

来源:AI科技大本营摘要:在计算机神经视觉技术的发展过程中,卷积神经网络成为了其中的重要组成部分,本文对卷积神经网络的数学原理进行了介绍。文章包括四个主要内容:卷积、卷积层、池化层以及卷积神经网络中的反向传播…

Linux学习之如何在物理机上安装Linux发行版

Linux学习之如何在物理机上安装Linux发行版 第一步:制作系统安装盘 准备一个至少8GB的空白U盘。下载启动盘制作工具Rufus,下载链接:https://pan.baidu.com/s/1CU8oZJVyCgdwETI2VxJwxA 提取码:gwi1下载Linux发行版安装镜像&#…

jQuery Easy UI Accordion(可伸缩的面板)包

Accordion 可伸缩的面板组件。基于panel,示为以下的比率&#xff1a; <!doctype html> <html lang"en"><head><meta charset"UTF-8"><script type"text/javascript" src"easyui/jquery.min.js"></sc…

Linux学习之ARM开发板连接ubuntu18.04LTS及NFS相关配置

Linux学习之ARM开发板连接ubuntu18.04LTS及NFS相关配置 第一步&#xff1a;在PC机安装Ubuntu18.04LTS 具体安装步骤参见上一篇文章 第二步&#xff1a;安装arm-linux-gcc交叉编译环境 在终端中执行sudo mkdir /forlinx,新建名为forlinx的文件夹&#xff08;文件夹名可任意&…

报告解读 | 智能技术“核聚变”催生智能经济,将拉动十万亿市场

来源&#xff1a;阿里研究院从IT时代、互联网到智能2019年政府工作报告&#xff0c;正式提出了“智能”战略&#xff1a;“深化大数据、人工智能等研发应用。打造工业互联网平台&#xff0c;拓展‘智能’&#xff0c;为制造业转型升级赋能。”以5G、物联网、人工智能等技术为代…

Linux学习之云服务器搭建嵌入式Linux开发环境

Linux学习之云服务器搭建嵌入式Linux开发环境 第一步&#xff1a;购买云服务器 进入腾讯云官方网站腾讯云官方网站 选择云校园云校园 进入控制台 将云服务器系统设置为Ubuntu系统 使用Xshell6登录云服务器 使用Xftp6进行文件的上传与下载 在云服务器安装arm-linux-gcc…

JS中toFixed()方法的问题及解决方案

最近发现JS当中toFixed()方法存在一些问题&#xff0c;采用原生的Number对象的原型对象上的toFixed()方法时&#xff0c;规则并不是所谓的“四舍五入”或者是“四舍六入五成双”&#xff0c;所谓“四舍六入五成双”&#xff0c;在百度百科上给的解释是&#xff1a;也即“4舍6入…

Linux学习之Linux历史

Linux学习之Linux历史 一、UNIX发展史 1968年&#xff0c;一些来自通用电器公司、贝尔实验室和麻省理工学院的研究人员开发了一个名叫Multics的特殊操作系统。Multics在多任务文件管理和用户连接中综合了许多新概念。1969&#xff0d;1970年&#xff0c;AT&T的贝尔实验室…

AI的阿基里斯之踵:模糊性

来源&#xff1a;IEEE电气电子工程师学会摘要&#xff1a;网罗全球科技前沿动态&#xff0c;为科研创业打开脑洞。很多年前&#xff0c;我和一位朋友去参观一个果园。他的儿子是这个果园的经理&#xff0c;向我们介绍了其工作。我的这位朋友和我都是工程师&#xff0c;开始讨论…

Linux学习之嵌入式Linux编程文件IO(C语言版)

Linux学习之嵌入式Linux编程文件IO&#xff08;C语言版&#xff09; 一、文件IO常用函数 1.open 2.write 3.read 示例代码&#xff1a; #include <sys/types.h> #include <fcntl.h> #include <unistd.h> #include <string.h> #include <stdli…

3个技巧让你正能量满满

因为工作关系&#xff0c;今年我每个月都在公司的新人入职培训课上讲一遍《职业习惯》&#xff0c;其中会讲到“职业生涯成功的关键点”&#xff0c;讲到“保持积极的心态”&#xff0c;每次都会讲几个真实的案例。这几个案例回味起来&#xff0c;对管理负面情绪、保持积极心态…

哈勃望远镜进一步确认宇宙在加速膨胀

来源&#xff1a;新华社美国哈勃太空望远镜的新观测成果进一步确认了宇宙在加速膨胀&#xff0c;现在的膨胀速度比根据早期宇宙特征预测的膨胀速度快大约9%。此次研究成果25日发表在美国《天体物理学杂志》上。研究人员利用新方法对大麦哲伦星云的70颗造父变星进行了观测。有“…

Git的安装和配置

Git的安装和配置 一、下载并安装git git下载地址 所有均选择默认值&#xff0c;一路NEXT 二、下载并安装tortoisegit 所有均选择默认值&#xff0c;一路NEXT 三、新建GitHub存储库 1.打开github官方网站&#xff0c;注册账号 2.登录后点击绿色NEW按钮 3.进入如图所示&am…

ARGB和PARGB

原文链接: http://blog.csdn.net/lnwaycool/article/details/8610313 ARGB和PARGB是针对32位图像而言的&#xff0c;Windows下图像可以是1位、4位、8位、16位、24位以及32位的。32位图像的一个像素 在内存中占四个字节&#xff0c;其排列顺序依次是Alpah,Red,Green,Blue,其中的…

AI芯片重磅破局者,开启边缘新智元

来源&#xff1a;物联网智库摘要&#xff1a;曾几何时&#xff0c;我们惊讶于AI算力和智力的创新程度&#xff0c;但彼时AI所创造的产业价值并不明显。随着移动互联网时代走向物联网时代&#xff0c;越来越多的场景和终端需要对数据进行即时高效的处理&#xff08;如车联网、无…