快来看看：CSS3实现动画的三种方式

100人浏览 2024-12-08 10:34:51

css动画就是元素从一种样式过渡到另一种样式的过程。常见的动画效果很多，比如，平移、旋转、缩放等，css实现动画的方式有以下几种：

1、transition：实现渐变动画

2、transform：实现转变动画

3、animation：实现自定义动画

一、实现渐变动画

1. 语法

transition：property duration timing-function delay；

2.子属性介绍

transition-property：填写需要变化的css属性；

transition-duration：完成过渡效果需要的时间单位(s或者ms)；

transition-timing-function：指定过渡函数，规定效果的速度曲线；

transition-timing-function具体的值可以看下面的表格：

transition-delay：动画效果的延迟触发时间(单位ms或者s)。

并不是所有属性都能过渡，比如display: none 到 display: block。

3.下面让我们看一个完整的例子

html代码如下：

css代码如下：

<style>

.box{

width: 200px;

height: 200px;

background: #6697ea;

transition-property: width,height,background-color,border-radius;

transition-duration: 2s;

transition-timing-function: ease-in;

transition-delay: 500ms;

/*简写*/

/*transition: all 2s ease-in 500ms;*/

}

.box:hover{

width: 300px;

height: 300px;

background: #cbb3d5;

border-radius: 50%;

}

</style>

效果如下：

二、实现转变动画

transform属性应用于2D 或 3D转换。该属性允许我们能够对元素进行旋转、缩放、倾斜、移动这四类操作。

1. 旋转(rotate)：主要分为2D旋转和3D旋转。

1.1 2D旋转

transform:rotate(45deg); //顺时针旋转45度

1.2 3D旋转

围绕原地到(x,y,z)的直线进行3D旋转

transform:rotate(x,y,z,angle);

x,y,z：分别表示 X、Y 和 Z 轴方向，都不能省略；
angle：设置对象设置对象的旋转角度，不能省略；
rotateX(angle)，沿着X轴进行3D旋转；rotateY(angle)，沿着Y轴进行3D旋转；rotateZ(angle)，沿着Z轴进行3D旋转；
一个参数 “角度”，单位 deg 为度的意思，正数为顺时针旋转，负数为逆时针旋转。

2. 缩放(scale)：一般用于元素的大小收缩设定。主要分为2D缩放和3D缩放。

2.1 2D缩放

transform:scale(0.5);

transform:scale(0.5,2);

一个参数时：表示水平和垂直同时缩放该倍率。
两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。

2.2 3D缩放

transform:scale3d(x,y,z);

transform:scaleX(x);

transform:scaleY(y);

transform:scaleZ(z);

x,y,z为缩放比例。

3. 倾斜(skew)：主要用于对元素的样式倾斜。

transform:skew(30deg);

transform:skew(30deg,30deg);

一个参数时：表示水平方向的倾斜角度。
两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。
skew 的默认原点 transform-origin 是这个物件的中心点。

4.移动(translate)：主要用于将元素移动。主要分为2D旋转和3D旋转。

4.1 2D移动

transform:translate(45px);

transform:translate(45px,150px);//沿着X轴和Y轴同时移动

一个参数时：表示水平方向的移动距离。
两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。

4.2 3D移动

transform:translateX(45px);//仅仅在X轴移动

transform:translateY(45px);//仅仅在Y轴移动

transform:translateZ(45px);//仅仅在Z轴移动

transform:translate3d(x,y,z);//在X,Y,Z轴上都移动

transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。
x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度；z只能设置长度值。

5.基准点 transform-origin

在使用 transform 方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用 transform-origin 属性，可以改变变形的基准点。
用法: transform-origin: 10px 10px;
表示相对左上角原点的距离，单位 px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；
两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为 left、center、right，第二个参数可以指定为 top、center、bottom。

6.一般配合transition过度使用。transform不支持inline元素，使用之前把它变为block。

为方便演示，可以看如下效果：

三、实现自定义动画

为了实现更灵活的动画效果，css3还提供了自定义动画的功能，关键帧动画@keyframes通常搭配 animation 属性一起使用，首先学习怎么定义关键帧动画

1.@keyframes 规则

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果。
必须定义动画的名称和时长。如果忽略时长, 则动画不会允许, 因为默认值是 0。
请用百分比来规定变化发生的时间, 或用关键词 “from” 和 “to”, 等同于 0% 和 100% 。

2.animation属性

name：需要绑定到选择器的keyframe名称。
duration：完成该动画需要花费的时间，秒或毫秒。
timing-function：跟transition-linear一样。
delay：设置动画在开始之前的延迟。
iteration-count：设置动画执行的次数，infinite为无限次循环。
direction：是否轮询反向播放动画。normal，默认值，动画应该正常播放；alternate，动画应该轮流反向播放。

3.下面让我们看一个完整的例子

html代码如下：

</div>

css代码如下：

.head {

-webkit-animation-name: up-down;

animation-name: up-down;

-webkit-animation-duration: 1s;

animation-duration: 1s;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

width: 50.2vmin;

height: 50.2vmin;

background: #ffffff;

overflow: hidden;

border-radius: 50%;

background: #4b96ca;

}

.head .eyes-one, .head .eyes-two {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

width: 14.5vmin;

height: 14.5vmin;

background: white;

border-radius: 50%;

overflow: auto;

position: absolute;

}

.head .eyes-one {

-webkit-animation-name: bounce;

animation-name: bounce;

-webkit-animation-duration: 1.4s;

animation-duration: 1.4s;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

top: -9.5vmin;

left: 2.5vmin;

}

.head .eyes-one:before {

content: "";

position: absolute;

width: 9.2vmin;

height: 9.2vmin;

background: #1f2033;

top: 1.8vmin;

left: 0.9vmin;

border-radius: 50%;

}

.head .eyes-two {

-webkit-animation-name: bounce;

animation-name: bounce;

-webkit-animation-duration: 1.4s;

animation-duration: 1.4s;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

top: -9.5vmin;

left: -31.5vmin;

}

.head .eyes-two:before {

content: "";

position: absolute;

width: 9.2vmin;

height: 9.2vmin;

background: #1f2033;

top: 1.8vmin;

left: 3.9vmin;

border-radius: 50%;

}

.head .smile {

-webkit-animation-name: bounces;

animation-name: bounces;

-webkit-animation-duration: 1.4s;

animation-duration: 1.4s;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

width: 8vmin;

height: 2vmin;

background: none;

left: -13.5vmin;

top: 11.8vmin;

border-bottom: 1vmin solid black;

border-left: 1vmin solid black;

border-right: 1vmin solid black;

border-radius: 0 0 15vmin 15vmin;

}

@-webkit-keyframes up-down {

0% {top: 2vmin;}

25% {top:0vmin;}

50% {top: 2vmin;}

75% {top: 0vmin;}

100% {top: 2vmin;}

}

@keyframes up-down {

0% {top: 2vmin;}

25% {top:0vmin;}

50% {top: 2vmin;}

75% {top: 0vmin;}

100% {top: 2vmin;}

}

@-webkit-keyframes bounce {

0% {top: -2vmin;}

25% {top: -12vmin;}

50% {top: -2vmin;}

75% {top: -12vmin;}

100% {top: -2vmin;}

}

@keyframes bounce {

0% {top: -2vmin;}

25% {top: -12vmin;}

50% {top: -2vmin;}

75% {top: -12vmin;}

100% {top: -2vmin;}

}

@-webkit-keyframes bounces {

0% {top: 15vmin;}

25% {top: 5vmin;}

50% {top: 15vmin;}

75% {top: 5vmin;}

100% {top: 15vmin;}

}

@keyframes bounces {

0% {top: 15vmin;}

25% {top: 5vmin;}

50% {top: 15vmin;}

75% {top: 5vmin;}

100% {top: 15vmin;}

}

效果如下：

总结

其实大家看完会发现，css3动画可以实现很多有趣的效果，有兴趣的同学可以试着去写写

本文分类：css
本文链接：https://m.fuwuqi.cn/css/lEy7AMoWJP.html

上一篇 > 怎样通过font属性控制CSS字体样式？
下一篇 > CSS解析器——css模块使用详解，用更优雅的方式转换css内容

导航栏目

服务器系统

服务器技术

编程语言

数据库

快来看看：CSS3实现动画的三种方式

相关推荐