transform、translate、translaton以及动画animation
translate和transform
最近项目不忙的时候和朋友闲聊,竟然发现自己对translate和transform的记忆竟然是那么模糊,因为平常用的比较少,所以比较容易记混,在此记录下来两者的关系,以免以后又像今天一样被打脸啦~~
tranform
在css3中transform主要包括以下几种: 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
旋转:rotate() 顺时针旋转给定的角度,允许负值rotate(30deg)
扭曲:skew()元素翻转给定的角度,根据给定的水平线(x轴)和垂直线(Y轴)参数:skew(30deg,20deg)
缩放:scale()放大或缩小,根据给定的宽度(X轴)和高度(Y轴)参数:scale(2,4)
移动:translate()平移,传进x,y值,代表沿x轴和y轴平移的距离:translate(30px,50px)
无论是旋转还是拉伸什么的,本质上都是应用的matrix()方法实现的(修改matrix()方法固定几个值),只是类似于transform:rotate这种表现形式,我们更容易理解,记忆与上手.
所有的2D转换方法组合在一起: matrix()旋转、缩放移动以及倾斜元素。
matrix(scale.x,scale.y,translate.x,translate.y)
transform: rotate旋转|scale缩放|skew扭曲|translate移动|matrix矩阵变形;
综合起来使用:transform: 30deg 1.5 30deg 20deg 100px 200px;//需要有空格隔开
transform与坐标
transform旋转是围绕一个中心点旋转,而这个中心点就是transform-origin属性对应的点,也是所有矩阵计算的一个重要依据点。
改变起点位置 transform-origin: bottom left;
translate
translate是transform的一个方法,translate代表移动,通过translate方法,使得元素从当前位置移动,根据给定的X(left)和Y(top)坐标。
用法:
//translate
transform:translate(50px, 100px);
//元素居中
position:absolute;
top:50%;
left:50%;
width:50px;
height:50px;
transform:translate(-50%,-50%);
background:gray;
transition
transition允许css属性值在一定时间内平滑过,transition是指定了某一个属性(如width)在两个值之间如何过渡。
transition主要包含四个属性值:
- 执行变换的属性:transition-property;
- 变换延续的时间:transition-duration;
- 在延续时间段,变换的速率变化:transition-timing-function //例:平缓进入、先快后慢;
值:ease(逐渐慢下来),linear(匀速),ease-in(由慢到快),ease-out(由快到慢),ease-in-out(先慢到快再到慢),cubic-bezier(该值允许你去自定义一个时间曲线)。
- 变换延迟时间: transition-delay
需要事件的触发,例如单击、获取焦点、失去焦点等。
语法:transition: property duration timing-function delay;
例如:transition: width 2s ease 0s;
animation
animation也是通过指定某一个属性(如width)在两个值之间如何过渡来实现动画。
//定义动画
@keyframes move {
from{}
to{}
}
@keyframes move {
0%{}
100%{}
}
调用动画
animation: 动画名称 动画时间 动画速度 动画延迟 动画次数 动画方向 动画播放状态 动画完成时的状态
- 动画名称: animation-name
- 动画时间 animation-duration
- 动画速度 animation-timing-function: linear(匀速变化) ease(低俗开始,然后加快,快结束的时候再放慢) ease-in(低速开始) ease-out(低速结束) ease-in-out(低俗开始,低速结束) steps()
- 动画延迟 animation-delay
- 动画次数 animation-iteration-count: infinite
- 动画方向 animation-direction:
- 动画播放状态: animation-play-state: running pause
- 动画完成时的状态: animation-fill-mode:forwards backwards
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
animation: move 5s linear infinite;
}
@keyframes move {
0%{
left: 100px;
}
50%{
left: 150px;
}
100%{
left: 200px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
与transition不同的是:
- animation可以通过keyframe显示控制当前帧的属性值,而transition只能隐式来进行(不能指定每帧的属性值),所以相对而言animation的功能更加灵活。
- animation通过模拟属性值改变来实现动画,动画结束之后元素的属性没有变化;而transiton确实改变了元素的属性值,动画结束之后元素的属性发生了变化;这一点,这在实际应用中会产生很大的区别。