前言
在实现鼠标悬浮时盒子上移的动画效果时,发现盒子移动地很死板并且由于给盒子添加了浮动的属性,盒子一上移下面的盒子就会有了空间而改变位置,在使用了transition和transform属性后很好地解决了这些问题,借此文章来记录一下transition和transform属性的基本使用。
一、transition 属性的基本使用
CSS 过渡通常使用简写属性 transition 控制,可以决定哪些属性发生动画效果(通过明确地列出这些属性),何时开始(通过设置延时),持续多久(通过设置时长)以及如何动画(通过定义缓动函数,比如线性或先快后慢)。
transition其实是transition-property、transition-duration、transition-timing-function、transition-delay的组合的简写属性,它可以由两个、三个或者四个值来根据需求组合运用。
1、transition-property 属性
指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画,其他属性仍如通常那样瞬间变化。
2、transition-duration 属性
以秒或毫秒为单位指定过渡动画所需的时间,默认值是 0s,表示不出现过渡动画。
注意: 可以指定多个时长,每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数,那么时长列表会重复。如果时长列表更长,那么该列表会被裁减。两种情况下,属性列表都保持不变。
例如:
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s;
}
//将被视为如下样式
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s, 3s, 5s;
}
3、transition-timing-function 属性
指定一个函数,定义属性值怎么变化。缓动函数定义属性如何计算。大多数缓动函数由四点定义一个立方贝塞尔曲线。也可以从 Easing Functions Cheat Sheet 选择缓动效果。
以下列出几个常用的函数:
linear:匀速均匀变化
ease:开始的时候很慢,中间加快变化,最后减速渐渐停止
ease-in:开始的时候很慢进入,之后匀速变化
ease-out:开始的时候匀速变化,最后减速变化
ease-in-out:开始的时候很慢,中间匀速变化,最后减速渐渐停止
更多可参考链接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function
4、transition-delay 属性
指定以秒(s)或毫秒(ms)为单位的延迟时间,即属性开始变化时与过渡开始发生时之间的时长,也就是等待延迟时间后再开始过渡。和transition-duration 一样,它也可以指定多个时间。
5、transition 组合使用
① 当transition取值是两个时,表示 过渡属性(transition-property)、 过渡时间(transition-duration)
例如 transition:margin-top 0.5s,表示过渡的属性是margin-top,过渡需要时间为0.5s。
② 当transition取值是三个时,表示 过渡属性(transition-property) 、过渡时间(transition-duration)、 过渡延迟时间(transition-delay)(或者 过渡函数)
例如 transition: margin-right 4s 1s; 或者 transition: margin-right 4s ease;
③ 当transition取值是四个时,表示 过渡属性(transition-property) 、过渡时间(transition-duration)、过渡函数(transition-timing-function)、过渡延迟时间(transition-delay)
例如 transition: margin-right 4s ease 5s;
transition 还可以给多个属性同时定义过渡,中间用逗号隔开,如下
transition:
margin-right 4s,
margin-top 4s ease 1s,
color 1s;
注意!过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果,可以在不同的伪元素之间切换,像是 :hover,:active 或者通过 JavaScript 实现的状态变化。
//需要和伪类选择器搭配使用实现两个状态变化
<style>
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 50px;
background-color: #a0d9f7;
//过渡属性
transition: width 2s ease-in-out, background-color 2s;
}
.box:hover {
background-color: #f7a0e4;
width: 500px;
}
</style>
<body>
<p>鼠标悬浮时盒子开始慢中间匀速最后慢,并且颜色变粉色。</p>
<div class="box">盒子</div>
</body>
二、transform 属性的基本使用
transform 属性允许旋转、缩放、倾斜或平移给定元素,取值是各种变换函数。
注意,只有使用盒模型(Box Model)来定位的元素可以被变换(transform
ed)。拥有 display: block
的元素是由盒模型定位的。如果添加了多个变换,就按从左到右的顺序依次变换。
经常使用到的函数有translate、scale、rotate,下面对三个函数及其参数进行详细介绍:
!!!注意,这些函数也可以单独作为属性来使用
translate 平移函数
① 当函数的取值为一个值时,表示沿 x 轴平移,沿x轴取值为正向右平移,为负向左平移
例如,transform:translate(20px)表示向右平移20px
②当函数的取值为两个值时,表示沿 x 轴、y轴平移,沿y轴取值为正表示向下平移,为负向上平移
transform:translate(20px,30px)表示向右平移20px,向下平移30px
③当函数的取值为两个值时,分别指定 X 轴、Y 轴、Z 轴的值进行三维平移,z轴取值为正是放大的效果,为负是缩小的效果,如果要使用需要3维的图形才能显示效果
由于是3维和前面的函数有一点点的不同,例如 transform:translate3d(20px,30px,10px)
④当函数取值为none时,表示不应用平移
更多例子可参考链接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/translate
scale 缩放函数,取值为数值或者百分比值
①取值为单个值时,同时表示沿x轴、y轴缩放的比例,比1大则是放大,比1小是缩小
例如,transform:scale(1.5)
②取值为两个值时,第一个数值表示沿x轴的缩放比例,第二个数值表示沿y轴的缩放比例
例如,transform:scale(1.5,1.5)
③取值为三个值时,第一个数值表示沿x轴的缩放比例,第二个数值表示沿y轴的缩放比例,第三个数值表示沿z轴的缩放比例
例如,transform:scale(1.5,1.5,1.5)
rotate 旋转函数
CSS中角度的三种单位,度(deg)、弧度(rad)、圈(turn)
①取值为角度值,不沿任何轴,进行旋转
例如,transform:rotate(90deg)
②取值为 x | y | z 轴+角度值,表示沿 x | y | z 轴旋转
例如,transform:rotate(x,180deg)
③取值为向量+角度值,表示沿向量旋转
例如,transform:rotate(1,1,1,180deg)
更多例子参考链接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/rotate
以上就是对transition和transform属性的总结,合理地使用可以帮助我们实现很好的动画效果并且不影响其他属性。
如有任何问题,可以私信我,一定会及时回复哦
相关参考链接:transition https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition
transform https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform