0%

css3 动画

css3中的动画主要包含变形、过渡、动画三个,而变形厘米包含旋转、扭曲、缩放、移动以及矩阵变形等。通过这些css属性,我们可以不通过js来仅凭css3来实现动画特效。

变形,transform

css的变形主要包括旋转(rotate)、扭曲(skew)、缩放(scale)和移动(translate)以及矩阵变形(matrix)。
注意:多个属性叠加起来的时候是空格隔开

旋转,rotate

通过指定的角度参数对元素指定一个2D旋转,可以定义旋转的基点:

1
2
3
4
.fade-in:hover{
transform-origin: 50% 50%;
transform: rotate(45deg);
}

移动,translate

移动分为三种情况,translate(x, y)水平方向和垂直方向同时移动;translateX(x)仅水平方向移动x轴;translateY(y)仅垂直方向移动y轴,也可以使用transform-origin来设定基点

1
2
3
.fade-in:hover{
transform: translate(100px, 100px);
}

缩放,scale

缩放也分为三种情况,scale(x, y)使元素水平方向和垂直方向同时缩放,scaleX(x)元素仅水平方向缩放,scaleY(y)元素仅垂直方向缩放,缩放基数为1,如果值大于1就放大,如果值小于1就缩小。

1
2
3
.fade-in:hover{
transform: scale(0.3, 2);
}

扭曲,skew

扭曲也分为三种情况,skew(x, y)使元素水平方向和垂直方向同时扭曲,skewX(x)元素仅水平方向扭曲,skewY(y)元素仅垂直方向扭曲。扭曲就是斜切变换,参数为度数(deg)

1
2
3
.fade-in img:hover{
transform: skew(30deg, 30deg);
}

矩阵,matrix

以一个含六值(a, b, c, d, e, f)变换矩阵的形式指定一个2D变换。这六个值对应的矩阵为3X3的矩阵:
| item | name | fdsf |
| :–| :–| :–|
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
matrix(a, b, c, d, e, f)的值及其说明:
a:水平方向上的尺寸缩放
b:垂直方向上的倾斜率
c:水平方向上的倾斜率
d:垂直方向上的尺寸缩放
e:水平方向上的移动距离
f:垂直方向上的移动距离
基准数值为:(1, 0, 0, 1, 0, 0)

1
2
3
4
5
.fade-in img:hover{
transform: matrix(1, 0, 0, 1, 300, 0);
// 相当于
transform: translateX(300px);
}

过渡,transition

transition允许属性值在一定时间内平滑的过渡。这种效果可以在鼠标点击、获得焦点、被点击或对元素任何改变中触发,并圆滑的以动画效果改变css的属性值。
transition主要包含了四个属性值:

  • 执行变换的属性,transition-property
  • 变换延续的时间,transition-duration
  • 变换的速率变化,transition-timming-function
  • 变换延迟时间,transition-delay

transition-property

指定元素中一个属性改变时执行transition效果。主要有:none(没有属性改变)、all(所有属性改变)、indent(属性名称)

transition-duration

指定元素转换过程的持续时间,默认为0,变换是及时的。单位可以是s(秒)或者ms(毫秒)

transition-timing-function

根据时间的推进改变属性值的速率变化,有六个值:

  • ease 逐渐变慢,等于贝赛尔曲线(0.25, 0,1, 0.25, 0.1)
  • linear 匀速,等于贝赛尔曲线(0, 0, 1, 1)
  • ease-in 加速,等于贝赛尔曲线(0.42, 0, 1, 1)
  • ease-out 减速,等于贝塞尔曲线(0, 0, 0.58, 1.0)
  • ease-in-out 加速然后减速,等于贝塞尔曲线(0.42, 0, 0.58, 1)
  • cubic-bezier 贝塞尔曲线,自定义时间曲线,(x1, y1, x2, y2)四个值特定于曲线上的点p1和p2,所有值需要在[0, 1]区域内,否则无效。

transition-delay

用来指定一个动画开始执行的时间,也就是当改变元素属性值后,多长时间才开始执行transition效果。默认为0,即立即执行,没有延迟。单位可以是s(秒)或ms(毫秒)。

1
2
3
4
5
6
7
8
9
10
11
.fade-in img{
width: 100px;
height: 100px;
background-color: #000000;
transition: all 1s ease-out 0s;
}

.fade-in img:hover{
width: 300px;
height: 300px;
}

变换的根本是矩阵的,过渡的根本是贝塞尔曲线。

动画,animation

CSS animation属性是如下属性的一个简写形式:animation-nameanimation-durationanimation-time-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-mode

在每个动画定义中,顺序很重要,可以被解析为<time>的第一个值被分配给animation-duraction,第二个分配给animation-delay

图形图像里面一个基础概念就是关键帧,每一个关键帧代表动画的一个过程节点,keyFrames具有自己的语法规则,命名由@keyFrames开头,后面紧接着是这个动画名称加上一对花括号,括号中是一些不同时段样式规则。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 .circle{
width: 100px;
height: 100px;
background: #ddd;
transition: all 3s ease-in-out 0s;
border-radius: 50%;
text-align: center;
line-height:100px;
animation: tony 3s infinite ease-in;
}
@keyframes tony{
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
码字辛苦,打赏个咖啡☕️可好?💘