变换:分为2d变换和3d变换,但一次只能用一个变换属性,多个的话最后一个会覆盖前面所有最终被浏览器实现,变换可以成为过渡和动画的一个待变参数(类似width,opacity等)。

过渡:是动画的初始模型和极简实现,只有初始状态(初始帧)和激活状态(结束帧)。

动画:可定义初始帧、中间帧、结束帧,通过多帧、细节的控制可以实现内容更丰富的动画。

过渡和动画的区别

动画类型 是否必须要有触发事件 状态保持情况 关键帧
过渡

在事件内,可一直保持状态;

在事件结束后,可按照过渡属性再恢复至原始状态

只有初始帧(正常状态)、结束帧(事件状态)
动画 否,定义在元素上可以直接开始,也可以由事件(如hover)触发 在事件内,只按照动画属性执行一次,执行结束后,可不必等待事件结束,就恢复至原始状态 除了初始帧、结束帧,可以设置多个中间帧,动画控制更精确、动画内容更丰富

动画在为页面添加交互动效方面起到至关重要的作用,在今后的工作中,这块的东西也要加深学习力度。

css3中的变换、动画和过渡的更多相关文章

  1. 自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. css3中变形与动画(三)

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

  3. CSS3中的3D动画实现(钟摆、魔方)--实现代码

    CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性  all|[attr] transition-duration 过渡时间 transition-delay ...

  4. 关于CSS3中transform变换的小坑

    2017年6月30日15:05:46 今天在写一个demo的时候,发现CSS3中transform变换的一个特性. 首先,我先描述一下我发现的情况(问题再现): <div class=" ...

  5. CSS3中2D/3D转换、过渡、动画

    转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...

  6. css3中变形与动画(一)

    css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). 首先介绍transform变形. transform英文意思:改变,变形. css3 ...

  7. css3中的制作动画小总结

    系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...

  8. 第98天:CSS3中transform变换详解

    transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...

  9. css3中变形与动画(二)

    css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). transform介绍过了.接下来介绍过渡transition. 一.例子 先通过一 ...

随机推荐

  1. Wiz笔记发布博客工具无法获取分类修复

    使用Wiz笔记可以很方便的将笔记发布到博客,而且支持markdwon书写,并且可以很方便的通过复制粘贴来插入图片. 用法:http://blog.wiz.cn/wiz-plugin-blog-writ ...

  2. tomcat项目重复加载问题

    主要是通过配置<Tomcat安装目录>/conf/server.xml文件 步骤: 1.打开server.xml,在</Host>的上一行添加内容格式如下 <Contex ...

  3. form之action的绝对路径与相对路径(转载)

    1.当你的form要提交到你自己的站点之外的URL的时候,就采取绝对路径: <form action="http://www.xxx.yyy:zzzz/mmm/nn/kkk.jsp&q ...

  4. Apache POI组件操作Excel,制作报表(三)

    Apache POI组件操作Excel,制作报表(三) 博客分类: 探索实践 ExcelApache算法Office单元测试      上一篇介绍了POI组件操作Excel时如何对单元格和行进行设置, ...

  5. bzoj 2744 朋友圈

    题目大意: 两个国家 各有A和B个人,每个人有一个数值. 若两个A国的人满足$val_i\space xor \space val_j \mod 2 =1$ 则他们为朋友 若两个B国的人满足$val_ ...

  6. 转载:百为STM32开发板教程之十二——NAND FLASH

    http://bbs.21ic.com/icview-586200-1-1.html 百为STM32开发板教程之十二——NAND FLASH 参考资料:百为stm32开发板光盘V3\百为stm32开发 ...

  7. UVa 12709 && UVaLive 6650 Falling Ants (水题)

    题意:给定 n 个长方体的长,宽,高,让你求高最大的时候体积最大是多少. 析:排序,用高和体积排序就好. 代码如下: #pragma comment(linker, "/STACK:1024 ...

  8. hihoCoder 扩展二进制数

    明天就要去实验室干活了....下次再打题不知是何时.... 题目链接: http://hihocoder.com/contest/hihointerview11/problem/2 这题不难,一开始想 ...

  9. Java标准输入流system.in报错: java.util.NoSuchElementException解决方法

    我的程序大概是这样的: main()主函数里面,调用两个自定义的方法,这里我们称之为方法a和方法b: 主函数main()里有一个:Scanner scanner = new Scanner(Syste ...

  10. shiro之IniRealm

    Shiro认证过程 创建SecurityManager--->主体提交认证--->SecurityManager认证--->Authenticsto认证--->Realm验证 ...