概况
| 属性 | 描述 |
|---|---|
| animation（动画） | 用于设置动画属性，他是一个简写的属性，包含6个属性 |
| transition（过渡） | 用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同 |
| transform（变形） | 用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表” |
| translate（移动） | translate只是transform的一个属性值，即移动。 |
一. animation(动画)
动画( animation)是CSS3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动插放等效果。
表格
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性，除了 animation-play-state属性 |
| animation-name | 制定需要使用的动画（ 必须的 ） |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒( 必须的 ) |
| animation-timing-function | 规定动画的速度曲线，默认是"ease"”。 |
| aniamtion-delay | 规定动画何时开始，默认是0. |
| animation-iteration-count | 规定动画被播放的次数，默认是1,还有 infinite |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是" normal" alternate逆播放 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是" running" 还有’ paused 暂停. |
| animation-fill-mode | 规定动画结束后状态，保持 forwards 回到起始 backwards |
属性
@keyframes：规定动画。
animation：所有动画属性的简写属性，除了animation-play-state属性。
animation-name：规定@keyframes动画的名称。
animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是0。
animation-timing-function：规定动画的速度曲线。默认是"ease"。
animation-delay：规定动画何时开始。默认是0。
animation-iteration-count：规定动画被播放的次数。默认是1。
取值：
具体数字
infinite，无限次数播放
animation-direction：规定动画是否在下一周期逆向的播放。默认是"normal"。
normal：默认值。动画按正常播放。
reverse：动画反向播放。
alternate：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse：动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
animation-play-state：规定动画是否正在运行或暂停。默认是"running"。
animation-fill-mode：规定对象动画时间之外的状态。
指定动画播放之前或之后的效果
none：默认值
forwards：动画完成后，保持最后一个状态
backwards：动画显示之前，保持在第一个状态
both：元素动画同时具有forwards和backwards效果
语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
定义语法
div {
width: 100px;
height: 100px;
background-color: teal;
/* 调用动画 */
animation-name: mymove;
/* 持续时间 */
animation-duration: 3s;
/* 也可以简写animation:mymove 3s; */
}
@keyframes mymove {
// 中间可以分为多个阶段自定义0% => 25% => 50% => 75% => 100%
0 % {}
100 % {}
}
实例
(1)
div {
animation-delay: 3 s; // 延时时间，从元素加载成功到开始动画;
animation-direction: alternative; // 设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行;
animation-duration: 3 s; // 设置动画一个周期的时长;
animation-iteration-count: infinite; //设置动画重复次数，可以指定infinite无限重复;
animation-name: mymove; // 指定由@keyframes 规则描述的关键帧名称;
animation-play-state: running // 允许暂停和恢复动画;
animation: none !important; // 暂停用的是这个,而不是stop
animation-timing-function: linear; // 时间函数，与transition的类似;
animation-fill-mode: forwards; // 指定动画执行前后如何为目标元素应用样式;
}
@keyframes mymove {
from {
// 开始，也可以写成 0%
margin - left: 100 %;
width: 300 %;
}
to {
// 结束，也可以写成100%
margin - left: 0 %;
width: 100 %;
}
}
(2)
二. transition(过渡)
transition是一个用于动画过度的属性，然而transiton属性只不过是一个简写属性，用于设置四个过度属性.
元素从一个状态到另外一个状态的平滑变换的过程
表格
| 属性 | 描述 | css |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过度的CSS属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
(1)transition-property 设置过渡的属性,比如：width height
语法
transition-property: none|all| property;
实例
transition-property:width;
菜鸟看效果
(2)transition-duration 设置过渡的时间，比如：1s 500ms
语法
transition-duration: time;
实例
transition-duration: 5s;
-webkit-transition-duration: 5s; /* Safari */
(3)transition-timing-function: 设置过渡的运动方式
语法
当过度的效果只有一种时，可以简写成以下方式
transition: width 3s ease 0s;
如果过度的效果有多个
transition-property: background，width,transform;
transition: 3s linear 0s;
过度的速度曲线
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
cubic-bezier(n, n, n, n)
cubic-bezier(0.845, -0.375, 0.215, 1.335)
实例
(4)transition-delay 设置动画的延迟
语法
transition-delay: time;
实例
transition-delay: 2s;
-webkit-transition-delay: 2s; /* Safari */
(5)transition: property duration timing-function delay 同时设置四个属性 综合写法(简写)
实例
transition:width 2s linear 3s;
三. transform(变形)
表格
| 属性 | 描述 |
|---|---|
| none | 定义不进行转换。 |
| translate(x,y) | 定义 2D 转换。 |
| translate3d(x,y,z) | 定义 3D 转换。 |
| translateX(x) | 定义转换，只是用 X 轴的值。 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 |
| scale(x,y) | 定义 2D 缩放转换。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
| perspective(n) | 为 3D 转换元素定义透视视图. |
1.旋转rotate
如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。
(1)transform:rotate(30deg);
顺时针旋转30edg
(2)transform:rotate(-30deg);
逆时针旋转30edg
2.移动translate
translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
(1) transform:translate(100px,200px):
100px向右平移 200px向下平移
translateX
(2)transform:translateX(200px):
200px向右平移
translateY
(3)transform:translateY(200px):
200px向下平移
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box{
width: 100%;
height: 500px;
/* background-color: aquamarine; */
}
.span{
width: 200px;
height: 200px;
background-color: rgb(236, 143, 29);
margin-top: 200px;
animation: mymove 1s;
}
@keyframes mymove {
0%{
transform: translate(0,0);
}
100%{
transform: translate(100px,0);
}
}
</style>
<body>
<div class="box">
<div class="span">11</div>
</div>
</body>
</html>
效果
3.倍数缩放scale
(1)transform:scale(all);
整体放大缩小,值越大放大越大,反之亦然
(2)transform:scale(x,y) x轴,y轴 定义 2D 缩放转换，改变元素的宽度和高度。
transform:scale(2,3)
X轴放大2倍,y轴放大3倍
(3)transform:scaleX(n);
transform:scaleX(2);
Y轴方向放大2倍
(4)transform:scaleY(n);
transform:scaleX(2);
Y轴方向放大2倍
4.扭曲skew
(1)transform:skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
transform:skew(10deg,20deg);
分别向x轴y轴扭曲
(2)transform:skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
transform:skewX(30deg)
X轴方向扭曲30deg
(3)transform:skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。
transform:skewY(30deg)
Y轴方向扭曲30deg
transform属性组合案例
实现:一个方块,先向右平移,然后在向上平移,到上面放大2倍,然后旋转45deg,然后扭曲skew(45deg,50deg),然后回到原点.
这就是属性组合使用的重要性!
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid red;
margin: 200px auto;
display: flex;
flex-direction: column-reverse;
}
.span {
width: 100px;
height: 100px;
background-color: antiquewhite;
}
.span:hover {
animation: mymove ease-in-out 6s;
}
@keyframes mymove {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(400px, 0);
}
75% {
transform: translate(400px, -400px);
}
100% {
transform: translate(400px, -400px) scale(2) rotate(45deg) skew(45deg,50deg);
}
}
</style>
<body>
<div class="box">
<div class="span"></div>
</div>
</body>
</html>
效果
5.transform-origin
作用： 设置元素旋转的基点位置。注：元素旋转前后基点位置不变。
适用于：所有块级元素及某些内联元素
定义: CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点/中心点）位置进行变形的,可以和旋转、移位、缩放等组合使用。这个属性用于transform-origin属性用于设置旋转元素的基点位置!!!
transform-origin: x-axis y-axis z-axis;
x-axis取值： left、 right、 center、 length、 / 百分数 / 数值
y-axis取值： top、 bottom、 center、 length、 / 百分数 / 数值
z-axis取值： length
transform-origin： center center;（ 默认位置， 以元素中心点为基点， 相当于50% 50% ）
transform-origin： left top;（ 以左上角为基点）
transform-origin： right top;（ 以右上角为基点）
transform-origin： center bottom;（ 以底线中心为基点）
(1)transform-origin:50 0;
默认基点在div中心一个点
transform: rotate(180deg); transform-origin:0 0;
围绕div中心点进行旋转180deg
(2)transform-origin:50% 0;
transform: rotate(180deg); transform-origin:50% 0;
围绕这个基点transform-origin:50% 0;位置,进行旋转 180deg
(3)transform-origin:50% 0;
transform: scale(2); transform-origin:50% 0;
围绕这个基点transform-origin:50% 0;位置,进行放大2倍
6.backface-visibility 设置盒子背面是否可见
7.perspective 设置透视距离
CSS动画优化
最后
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
