CSS3之 transform和animation区别
CSS3 有3种和动画相关的属性:transform, transition, animation。其中 transform 描述了元素静态样式。而transition 和 animation 却都能实现动画效果。所以transform 常常配合后两者使用
一、transform 描述的是元素静态样式
transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。 必须是鼠标移上或者点击执行属性变化,鼠标离开属性回归。说到底就是属性不会变化。配合-webkit-transition: 0.3s;transition: 0.3s;才会有动画的效果,否则会很生硬。
旋转:rote(30deg) 水平面以元素中心旋转多少度;
rotateX(angle) 定义沿着 X 轴的 3D 旋转;
rotateY(angle) 定义沿着 Y 轴的 3D 旋转;
位移 :translate(x,y) 定义 2D 转换;
translate3d(x,y,z) 定义 3D 转换;
缩放:scale(x,y) 定义 2D 缩放转换;
scale3d(x,y,z) 定义 3D 缩放转换;
二、实现动画效果的:transition animation
1、transition
transition 属性是一个简写属性,用于设置四个过渡属性
transition: property duration timing-function delay;
过渡的属性 ,完成过度效果需要时间 , 速度曲线, 延迟时间
.one1{transition: width 3s linear 2s;} .one1:hover{width:300px;}
transition定义了动画的属性、时间、速度曲线以及延迟时间 ;通常和hover等事件配合使用,由事件触发。
2、animation
animation 属性是一个简写属性,用于设置六个动画属性:
animation的使用必须结合@keyframes animation-name使用
@keyframes move{
form{ left:0px;} to{ left:200px;}
}
在需要动画的元素上面添加动画 div{animation:move 5s infinite;}
animation: name duration timing-function delay iteration-count direction;
动画名称,动画执行时间,速度曲线,动画延迟时间,播放次数,是否反向播放
animation可以设定每一帧的样式和时间
区别:
1. 触发条件不同。transition通常和hover等事件配合使用,由事件触发。animation则立即播放。
2. 循环。 animation可以设定循环次数。
3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性, transition中所有样式属性都要一起变化。
4. 与javascript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式,transition负责动画效果,天作之合,比之前只能用js时爽太多。
CSS3之 transform和animation区别的更多相关文章
- 2018年1月17日总结 css3里transition 和animation 区别
transition 和animation两个CSS3属性经常被用到实际项目中,想把它整理出来. 1.先介绍transition >>>>> a. 在做项目中经常会遇见 ...
- css3 变形(transform)、转换(transition)和动画(animation)
http://www.w3cplus.com/content/css3-transform/ 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动tr ...
- CSS3(transform/transition/animation) 基础 总结
1.CSS3新增的样式(常用) //颜色透明表示rgba(0,0,0,.5) //圆角(定义角半径)border-radius: 5px 10px 15px 20px; //文字/盒子阴影text-s ...
- css3之transition、transform、animation比较
css3动画多少都有些了解,但是对于transition.transform.animation这几个属性一直是比较模糊的,所以啊,这里做一个总结,也希望大家都可以对此有一个更好地理解. 其实, ...
- zoom和transform:scale的区别
小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...
- CSS3 3D Transform
CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...
- css 动画 transform transition animation
1.transform transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...
- 小tips: zoom和transform:scale的区别
小tips: zoom和transform:scale的区别 转自 张鑫旭 前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://w ...
- css中zoom和transform:scale的区别
css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...
随机推荐
- 2977,3110 二叉堆练习1,3——codevs
二叉堆练习1 题目描述 Description 已知一个二叉树,判断它是否为二叉堆(小根堆) 输入描述 Input Description 二叉树的节点数N和N个节点(按层输入) 输出描述 Outpu ...
- Spring MVC 笔记 概述
学习笔记 模型:封装装程序数据 视图:渲染模型数据,一般来说就是输出HTML 控制:处理请求,构建模型并将其传递给视图进行渲染 以上三者均围绕DispatcherServlet设计,它处理所有的HTT ...
- rsync全网备份
rsync备份企业方案 企业有Linux服务器又有windows服务器,备份用rsync(服务端),Linux(客户端),Windows(客户端,cwrsync,旧版本有免费版)打包压缩数据往服务器上 ...
- MySQL之索引以及正确使用索引
一.MySQL中常见索引类型 普通索引:仅加速查询 主键索引:加速查询.列值唯一.表中只有一个(不可有null) 唯一索引:加速查询.列值唯一(可以有null) 组合索引:多列值组成一个索引,专门用于 ...
- String formatting in Python
| \n | 换行 || \t | 制表符 || \ | 转义 || \\ | \ | the '%' operator is used to format a set of va ...
- windows 实现vue命令行
在代码编辑器里写好文件的位置,以及相关的命令,保存文件类型是.cmd
- NOI2017爆零记[AFO]
WC2017 12分……全省第一…… APIO2017 4分……全省第二…… 千言万语汇成两个表格 NOI2017 114分(笔试100+一试4+二试5+A类5)……全省第三…… 全场最菜…… day ...
- RestEasy用户指南---第6章.@QueryParam
转载说明出处:http://blog.csdn.net/nndtdx/article/details/6870391 原文地址 http://docs.jboss.org/resteasy/docs/ ...
- hdu_1861_游船出租_201402282130
游船出租 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- What you can talk
data buffer who locked the account hash join cost memory and nested loop do not. How to make it hash ...