CSS3特效之转化(transform)和过渡(transition)
CSS3特效之转化(transform)和过渡(transition)
在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition)。有人可能会有疑问,CSS3动画不是只有animation一个属性吗?怎么又和转化(transform)和过渡(transition)扯上关系了,其实并非如此,转化(transform)属性让动画的变换多元化,而过渡(transition)属性是动画中的一种表现形式,也可以说成是动画一个版本。多元化相信大家都能理解,这边就不提了,为什么说过渡(transition)属性是动画的一个版本?这个在了解了转化(transform)和过渡(transition)基本知识后,我再陈述其中的原因。
言归正传,现在我们就开始认识下CSS3中的转化(transform)和过渡(transition)两个属性。
开发商前缀的特定浏览器样式
理解CSS3属性之前,我们需要先理解什么是开发商前缀,为什么会有开发商前缀?开发商前缀顾名思义和各大浏览器的开发商相关,是各大浏览器用来标识自身的一种特殊标记。那么为什么会出现开发前缀这种标记呢?其实这和CSS3标准制定流程有关系,制定CSS标准的那群人在引入新功能时,需要听取浏览器开发商和Web设计人员的反馈,之后更需要让浏览器开发商和Web设计人员实现不完美的功能,这样就会形成一个试验和反馈循环。在此期间,Web设计人员使用新功能在网站中,如果将来标准发生改变,就会导致网站无法使用,所有浏览器开发商就使用了开发商前缀的方法来避免这一问题的发生。
开发商前缀:
转化(transform)
定义和用法:transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
transform 2D转换方法:
浏览器支持:
- Internet Explorer 10、Firefox、Opera 支持 transform 属性。
- Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。
- Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。
- Opera 只支持 2D 转换。
过渡(transition)
定义和用法:transition 属性是一个简写属性,用于设置四个过渡属性:transition-property、transition-duration、transition-timing-function、transition-delay
语法:transition: property duration timing-function delay;
属性值:
测试Demo
HTML代码:
<div class="box">
<span class="circle"></span>
</div>
CSS代码:
.box{
width: 360px;
height: 100px;
background-color: palegreen;
text-align: center;
position: relative;
}
.box .circle{
position: absolute;
width: 30px;
height: 30px;
border-radius: 30px;
background-color: pink;
left: 0;
top: 35px;
-moz-transition:ease-out 1s;
-o-transition:ease-out 1s;
-webkit-transition:ease-out 1s;
transition:ease-out 1s;
}
.box:hover .circle{
left: 270px;
background-color: red;
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
-webkit-transform:scale(1.5);
transform: scale(1.5);
}
动画替代过渡(transition)属性
CSS代码(只做测试,不考虑各大浏览器的前缀)
.mouse-over{
animation:moveR ease-out 1s forwards;
}
.mouse-out{
animation:moveL ease-out 1s forwards;
}
@keyframes moveR {
from{left: 0;}
to{left: 270px;}
}
@keyframes moveL {
from{left: 270px;}
to{left: 0;}
}
过渡(transition)可以分解为两个动画效果在不停的相互交换,鼠标移入时的效果等同于添加动画.mouse-over,移出是等同添加动画.mouse-out。当然在过渡(transition)中DOM节点所到达的目标位置和运行的时间相关,所有如果需要精确分解整个动画过程,相对还是比较复杂的。
总结
转化(transform)是为了丰富DOM节点的变换方式,过渡(transition)是操作DOM节点样式的运动。在当下,大量的浏览器会涉及到动画,都会采用CSS3新特性来实现,相对于JQuery封装的动画效果它的运动更加流畅,减小JQuery带来的计算负荷。对于移动端,CSS3新特性使用更加普遍,为了能更好的渲染网站,很多优秀的前端工程师都会选择对应的属性来调取手机GPU,让这些效果被渲染的更流畅。
CSS3特效之转化(transform)和过渡(transition)的更多相关文章
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换
边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...
- CSS3之过渡Transition
CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...
- css3-12 transition+css或transform实现过渡动画
css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...
- CSS3(2)--- 过渡(transition)
CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...
- CSS3(3)---2D变形(transform)
CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...
- css3基础-文本与字体+转换+过渡+动画+案例
Css3文本与字体 文本阴影 h1 { text-shadow: 5px 5px 5px red; } word-break换行: h1:nth-child(1) { word-break: no ...
- 深入理解CSS过渡transition
× 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...
随机推荐
- 史上最全Winform中使用ZedGraph教程与资源汇总整理(附资源下载)
场景 C#窗体应用中使用ZedGraph曲线插件绘制图表: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/99716066 Win ...
- python web框架Flask——后台登录
项目搭建 创建一个项目之后,需要在手动创建几个包(含有__init__.py文件的目录)和文件 1.在主目录下创建配置文件:config.py 2.在主目录下创建扩展文件:exts.py 3.在主目录 ...
- CSTC-2017-Web-writeup
0x01 前言 这一次的比赛web题只做出来3个,也是菜的抠脚.. 0x02 web-签到题 php弱类型 查看源码,发现是代码审计,要求用户名必须为字母,密码必须为数字,登陆页面可以用开头为0 ...
- 安装新版Magisk卡在启动页面等问题以及解决办法
手持小米9,之前更新了新版本的Magisk Manager之后,发现手机再打开会一直卡在进入界面无法启动(如下图显示) 逛了逛Github.XDA.Stack Overflow等论坛,大致结论 ...
- nginx是怎么处理http请求的
nginx是怎么处理http请求的 参考:How nginx processes a request nginx first decides which server should process t ...
- 开始认识java
1.java发展历史 1991年 詹姆斯·高斯林 (James Gosling) SUN公司Green项目(消费类电子产品) Oak ...
- Jenkins之插件Publish HTML reports的使用
前提: 下载插件HTML Publisher plugin 一.安装 安装好HTML Publisher plugin之后,会在新建或者编辑项目时,在[增加构建后操作步骤]出现[Publish HTM ...
- 深入了解Python
一.Python的风格 Python在设计上坚持了清晰划一的风格,这使得Python成为一门易读.易维护,并且被大量用户所欢迎的.用途广泛的语言. 设计者开发时总的指导思想是,对于一个特定的问题,只要 ...
- 记 2019蓝桥杯校内预选赛(JAVA组) 赛后总结
引言 好像博客好久没更新了 哈哈哈哈哈 趁现在有空更新一波 不知道还有没有人看 确实该记录一下每天做了什么了 不然感觉有些浑浑噩噩了 比赛介绍 全称: 蓝桥杯全国软件和信息技术专业人才大赛 蓝桥杯 实 ...
- pindel及breandancer安装
1.安装pindel需要依赖htslib https://github.com/samtools/htslib.git mv htslib htslib1 autoheader # If using ...