CSS中的过渡效果及动画
过渡效果的变化与动画的运用
过渡效果
过渡 transition
作用:可以为一个元素在不同状态之间切换得时候添加过渡效果
属性名:transition(复合属性)
属性值:过渡得属性 花费时间(s)
注意:
- 过渡的属性可以是具体得CSS属性
- 也可以为all(两个状态属性值不同的所有属性,都产生过渡效果)
- transition 设置给元素本身(谁做过渡给谁加)
平面转换
作用:为元素添加动态效果,一般与过渡配合使用
概念:改变盒子在平面内的形态
属性名:transform
属性值:平移(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)
平移 translate
transform: translate(X轴移动距离, Y轴移动距离);
- 取值
- 像素单位数值
- 百分比(参照盒子自身尺寸计算结果)
- 正负均可
- 技巧
- translate() 只写一个值,表示沿着 X 轴移动
- 单独设置 X 或 Y 轴移动距离:translateX() 或 translateY()
平移既可以用来当过渡效果使用,也可以用来当定位使用
注意的是,其百分比参照自身尺寸计算
旋转 rotate
transform: rotate(旋转角度);
- 取值:角度单位是 deg
- 技巧
- 取值正负均可
- 取值为正,顺时针旋转
- 取值为负,逆时针旋转
多重转换
transform: translate() rotate();
当需要平移和旋转两种效果时,必须采用复合写法,且要保持先平移再旋转
写两个transform属性后者效果会覆盖前者
多重转换是以第一种转换方式坐标轴为准转换形态,旋转会改变网页元素的坐标轴向
如果先写旋转,则后面的转换效果的轴向以旋转后的轴向为准,会影响转换结果
缩放 scale
transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);
- 技巧
- 通常,只为 scale() 设置一个值,表示 X 轴和 Y 轴等比例缩放
- 取值大于1表示放大,取值小于1表示缩小
倾斜 skew
transform: skew(旋转度数);
取值为角度度数,角度单位为 deg
转换原点 transform-origin
默认情况下,转换原点是盒子中心点
transform-origin: 水平原点位置 垂直原点位置;
取值:
- 像素单位数值
- left、right、top、bottom、center
- 百分比
渐变效果
background-image: radial-gradient()
属于背景颜色的一种,效果为多个颜色渐变过渡
线性渐变
background-image: linear-gradient(
渐变方向,
颜色1 终点位置,
颜色2 终点位置,
......
);
取值:
- 渐变方向:可选
- to 方位名词
- 角度度数
- 终点位置:可选
- 百分比
/* 从上到下,蓝色渐变到红色 */
background-image: linear-gradient(blue, red);
/* 渐变轴为45度,从蓝色渐变到红色 */
background-image: linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
background-image: linear-gradient(to left top, blue, red);
/* 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
background-image: linear-gradient(0deg, blue, green 40%, red);
/*透明到半透明的渐变,注意:技术上,transparent 为 rgba(0,0,0,0) 的缩写。*/
background-image: linear-gradient(transparent,rgba(0,0,0,0.5));
径向渐变
background-image: radial-gradient(
半径 at 圆心位置,
颜色1 终点位置,
颜色2 终点位置,
......
);
取值:
- 半径可以是2条,则为椭圆,一条x轴一条y轴
- 圆心位置取值:像素单位数值 / 百分比 / 方位名词
空间转换
空间:是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间,Z 轴位置与视线方向相同。
空间转换也叫 3D转换
属性:transform
属性值:同平面转换类似,多了个z轴
坐标轴取值的正负:向前、向下、向右为正
平移
transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();
取值与平面转换相同
默认情况下,Z 轴平移没有效果,原因:电脑屏幕默认是平面,无法显示 Z 轴平移效果
视距 perspective
作用:指定了观察者与 Z=0 平面的距离,为元素添加透视效果
透视效果:近大远小、近实远虚
属性:(添加给父级,取值范围 800-1200)
perspective: 视距;
旋转
transform: rotate3d(x, y, z, 角度度数);
rotateX()
rotateY()
rotateZ()
rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度
x,y,z 取值为0-1之间的数字
立体呈现 transform-style
作用:设置元素的子元素是位于 3D 空间中还是平面中
属性名:transform-style
属性值:
- flat:子级处于平面中
- preserve-3d:子级处于 3D 空间
实现一个立方体
.box {
position: relative;
width: 200px;
height: 200px;
margin: 200px auto;
transition: all 2s;
transform-style: preserve-3d;
perspective: 1000px;
}
.box:hover {
transform: rotateX(-180deg) scale3d(2,2,2);
}
.box div {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
.front {
background-color: salmon;
transform: translateZ(100px);
}
.back {
background-color: hotpink;
transform: translateZ(-100px);
}
.left {
background-color: rgb(40, 173, 40);
transform: rotateY(90deg) translateZ(100px);
}
.right {
background-color: rgb(99, 70, 70);
transform: rotateY(90deg) translateZ(-100px);
}
.top {
background-color: rgb(40, 153, 173);
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
background-color: rgb(106, 36, 237);
transform: rotateX(90deg) translateZ(-100px);
}
<div class="box">
<div class="front"></div>
<div class="back"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
缩放
transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();
动画效果
过渡效果与动画效果区别:
过渡:实现两个状态间的变化过程
动画:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)
动画的实现
1、定义
/* 方式一 */
@keyframes 动画名称 {
from {}
to {}
}
/* 方式二 */
@keyframes 动画名称 {
0% {}
10% {}
......
100% {}
}
两种定义取决于你需要的动画需要几步,若只有两步,则使用方式一,两步以上则用方式二
2、使用
使用属性加给自身,谁需要动画效果就加在谁身上
animation: 动画名称 动画花费时长;
animation复合用法
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
/*多组动画*/
animation:
动画一,
动画二,
... ...
;
注意:
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有两个时间值,第一个时间表示动画时长,第二个时间表示延迟时间
- 多组动画中间逗号隔开
.box {
width: 200px;
height: 100px;
background-color: pink;
/* linear:匀速 */
animation: change 1s linear;
/* steps(n):分步动画,分n步,工作中,配合精灵图实现精灵动画 */
animation: change 1s steps(3);
/* 如果有两个时间,第一个是动画时长,第二个是延迟时间 */
animation: change 1s 2s;
/* 重复次数,infinite:无限循环 */
animation: change 1s 3;
animation: change 1s infinite;
/* alternate:反向 */
animation: change 1s infinite alternate;
/* 动画执行完毕时的状态, forwards:结束状态; backwards:开始状态(默认) */
animation: change 1s forwards;
animation: change 1s backwards;
/*多组动画同时实行*/
animation:
change 1s,
move 1s;
}
/* 宽度 从 200 变化到 800 */
@keyframes change {
from {
width: 200px;
}
to {
width: 800px;
}
}
@keyframes move {
/*初始状态和原状态相同时,可以省略
from{
transform: translate(0);
}*/
to{
transform: translate(200px);
}
}
animation拆分用法
属性 | 作用 | 取值 |
---|---|---|
animation-name | 调用的动画名称 | 名称 |
animation-duration | 需要运行动画的时间 | 时间s |
animation-delay | 延迟多久启动动画 | 时间s |
animation-fill-mode | 动画执行完毕时的状态 | backwards:开始时状态 forwards:结束时状态 |
animation-timing-function | 速度曲线 | linear steps(数字):逐帧动画 |
animation-iteration-count | 重复次数 | infinite:无限重复 |
animation-direction | 动画运动方向 | alternate:正向结束后反向 |
animation-play-state | 暂停动画 | paused:暂停,可配合:hover |
无缝移动动画演示
效果代码演示
* {
margin: 0;
padding: 0;
}
.box {
margin: 200px auto;
height: 80px;
width: 600px;
border: 1px solid black;
overflow: hidden;
}
.box ul {
display: flex;
/* transition: all 2s; */
animation: move 2s linear infinite;
}
.box ul li {
list-style: none;
}
@keyframes move {
from{
transform: translate(0);
}
to{
transform: translate(-1400px);
}
}
.box ul li div {
height: 80px;
width: 200px;
}
<div class="box">
<ul>
<li><div style="background-color: rgb(244, 188, 116);"></div></li>
<li><div style="background-color: rgb(241, 139, 6);"></div></li>
<li><div style="background-color: rgb(200, 245, 23);"></div></li>
<li><div style="background-color: rgb(215, 250, 242);"></div></li>
<li><div style="background-color: rgb(215, 221, 250);"></div></li>
<li><div style="background-color: rgb(250, 215, 238);"></div></li>
<li><div style="background-color: rgb(244, 9, 75);"></div></li>
/*预留重复补充,补充的大小刚好填充展示的区域*/
<li><div style="background-color: rgb(244, 188, 116);"></div></li>
<li><div style="background-color: rgb(241, 139, 6);"></div></li>
<li><div style="background-color: rgb(200, 245, 23);"></div></li>
</ul>
</div>