css3中的变换、动画和过渡
变换:分为2d变换和3d变换,但一次只能用一个变换属性,多个的话最后一个会覆盖前面所有最终被浏览器实现,变换可以成为过渡和动画的一个待变参数(类似width,opacity等)。
过渡:是动画的初始模型和极简实现,只有初始状态(初始帧)和激活状态(结束帧)。
动画:可定义初始帧、中间帧、结束帧,通过多帧、细节的控制可以实现内容更丰富的动画。
过渡和动画的区别
| 动画类型 | 是否必须要有触发事件 | 状态保持情况 | 关键帧 |
| 过渡 | 是 |
在事件内,可一直保持状态; 在事件结束后,可按照过渡属性再恢复至原始状态 |
只有初始帧(正常状态)、结束帧(事件状态) |
| 动画 | 否,定义在元素上可以直接开始,也可以由事件(如hover)触发 | 在事件内,只按照动画属性执行一次,执行结束后,可不必等待事件结束,就恢复至原始状态 | 除了初始帧、结束帧,可以设置多个中间帧,动画控制更精确、动画内容更丰富 |
动画在为页面添加交互动效方面起到至关重要的作用,在今后的工作中,这块的东西也要加深学习力度。
css3中的变换、动画和过渡的更多相关文章
- 自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- css3中变形与动画(三)
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
- CSS3中的3D动画实现(钟摆、魔方)--实现代码
CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性 all|[attr] transition-duration 过渡时间 transition-delay ...
- 关于CSS3中transform变换的小坑
2017年6月30日15:05:46 今天在写一个demo的时候,发现CSS3中transform变换的一个特性. 首先,我先描述一下我发现的情况(问题再现): <div class=" ...
- CSS3中2D/3D转换、过渡、动画
转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...
- css3中变形与动画(一)
css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). 首先介绍transform变形. transform英文意思:改变,变形. css3 ...
- css3中的制作动画小总结
系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...
- 第98天:CSS3中transform变换详解
transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...
- css3中变形与动画(二)
css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). transform介绍过了.接下来介绍过渡transition. 一.例子 先通过一 ...
随机推荐
- RabbitMQ通过shovel插件迁移数据
前言 生产环境中会遇到RabbitMQ数据迁移的场景,例如:切换云服务厂商.不同Region之间数据迁移.新搭建RabbitMQ实例,数据需要同步至新的RabbitMQ实例. 前提条件: 源Rabbi ...
- 从CakePHP 1.3升级到2.5
从CakePHP 1.3升级到2.5 摘要:最近把一个CakePHP 1.3的项目升级到了2.x,当然就用最新的版本2.5.3了,结果基本满意.本文记录了升级的过程,包括使用的工具,遇到的问题和相应的 ...
- PL/SQL Developer导入导出Oracle数据库方法
前一篇博客介绍了Navicat工具备份Oracle的方法.这篇博客介绍一下使用PL/SQL Developer工具导入导出Oracle数据库的方法. PL/SQL Developer是Oracle数据 ...
- 屏蔽微软的SignalR
去年采用ASP.NET MVC开发项目,在谷歌浏览器里调试页面的时候,发现项目在不停地请求数据,链接很奇怪: http://localhost:63004/654c2dd725bb4401b8fc0c ...
- mac下Android Studio干净卸载
1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ Studio.app rm -Rf ~/Library/Pr ...
- POJ3189 Steady Cow Assignment —— 二分图多重匹配/最大流 + 二分
题目链接:https://vjudge.net/problem/POJ-3189 Steady Cow Assignment Time Limit: 1000MS Memory Limit: 65 ...
- 在datagrid中,IE浏览器报错:SCRIPT5007: 无法获取属性“rowspan”的值: 对象为 null 或未定义
项目总采用datagird时,产生界面如下图原本标题上有功能按钮,此时消失 错误:SCRIPT5007: 无法获取属性"rowspan"的值: 对象为 null 或未定义, 造 ...
- 获取http请求的响应状态
import urllib.request url="http://www.baidu.com" #返回一个对象 response=urllib.request.urlopen(u ...
- 利用Redis Sentinel实现redis主从自动切换
redis主从配置很简单,只需要在slave的配置里加slaveof 192.168.0.100 6379(master的ip和端口) 如果master有密码再设置 masterauth passwo ...
- 洛谷P3833 [SHOI2012]魔法树(树链剖分)
传送门 树剖板子…… 一个路径加和,线段树上打标记.一个子树询问,dfs的时候记录一下子树的区间就行 // luogu-judger-enable-o2 //minamoto #include< ...