文章图片
关键词：大家好，本文将学习前端动画的三种实现方式，简单有趣，如果觉得文章写的不错，还请点赞转发关注呀，你的支持就是对我最大的鼓励，好的，开始吧！css3，动画，三种方式
【CSS|CSS动画的三种实现方式，你会几种（）】
文章目录
- 1. transition过渡
- 2. transform转换
-
- 移动 translate
- 缩放 scale
- 旋转 rotate
- 倾斜 skew
- 3d 书
- 3. 关键帧动画@keyframes
-
- animation
- 写在最后
1. transition过渡
口诀： 谁要过渡效果给谁加相关属性：| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
青铜
文章图片
给div添加过渡，当div变化时，过渡就会生效
参数1：给谁加
参数2：过渡几秒
参数3：运行函数，此处是匀速
参数4：延迟几秒执行
Document - 锐客网
>
div {
width: 600px;
height: 80px;
border: 1px solid;
/*
给div添加过渡，当div变化时，过渡就会生效
参数1：给谁加
参数2：过渡几秒
参数3：运行函数，此处是匀速
参数4：延迟几秒执行
*/
transition: background-color 2s linear 1s;
}div:hover {
background-color: #69F;
}
王者
文章图片
给div添加过渡，当div变化时，过渡就会生效
这里分别给两个属性添加了过渡，给多个属性分别添加时使用,分隔开
解读：width由100px变为600px，用时2秒，速度函数为ease缓和
background-color由白色变为蓝色，用时1.5秒，并延时0.8秒执行
Document - 锐客网
>
div {
width: 100px;
height: 80px;
border: 1px solid;
/*
给div添加过渡，当div变化时，过渡就会生效
这里分别给两个属性添加了过渡，给多个属性分别添加时使用,分隔开
解读：width由100px变为600px，用时2秒，速度函数为ease缓和
background-color由白色变为蓝色，用时1.5秒，并延时0.8秒执行
*/
transition: width 2s ease, background-color 1.5s 0.8s;
}div:hover {
width: 600px;
background-color: #69F;
}
2. transform转换 使用 transform 可以轻松的完成 2d 下的移动，旋转，缩放，倾斜等的动画基本属性，也可以组合他们，同时css3也提供了对 3d 转换的支持
属性| 值 | 描述 |
|---|---|
| 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 转换元素定义透视视图。 |
文章图片
Document - 锐客网
>
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}div {
width: 600px;
height: 80px;
border: 1px solid;
transition: all .8s;
}div:hover {
transform: translate(10px, -30px);
background-color: skyblue;
}
缩放 scale
文章图片
Document - 锐客网
>
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}div {
width: 600px;
height: 80px;
border: 1px solid;
transition: all .8s;
}div:hover {
transform: scale(.95, 1.2);
background-color: skyblue;
}
旋转 rotate
transform-origin: left;
属性，可以改变变换原点，可以使用left,center,right等等，还可以使用像素或其他单位
文章图片
Document - 锐客网
>
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}div {
width: 200px;
height: 10px;
border: 1px solid;
transition: all 1s;
transform-origin: left;
}div:hover {
transform: rotate(720deg);
background-color: skyblue;
}
倾斜 skew
文章图片
Document - 锐客网
>
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}div {
width: 600px;
height: 60px;
border: 1px solid;
transition: all 1s;
}div:hover {
transform: skew(30deg,5deg);
background-color: skyblue;
}
3d 书
文章图片
Document - 锐客网
>
* {
margin: 0;
}.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 350px;
perspective: 500px;
}.door {
width: 200px;
height: 350px;
background-color: #666;
transform-origin: 0 0;
transition: all 1s;
}.box:hover .door {
transform: rotateY(-150deg);
}p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 350px;
line-height: 350px;
text-align: center;
background-color: #ccc;
z-index: -1;
}
关注小周
3. 关键帧动画@keyframes 关键帧动画@keyframes通常搭配 animation 属性一起使用，首先学习怎么定义关键帧动画
| 值 | 描述 |
|---|---|
| animationname | 必需。定义动画的名称。 |
| keyframes-selector | 必需。动画时长的百分比。合法的值：0-100%from（与 0% 相同）to（与 100% 相同） |
| css-styles | 必需。一个或多个合法的 CSS 样式属性。 |
@keyframes move {
from {
left: 10px;
}to {
left: 100px;
}
}
animation 属性：
| 值 | 描述 |
|---|---|
| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
文章图片
Document - 锐客网
>
div {
position: relative;
width: 600px;
height: 100px;
border: 1px solid;
overflow: hidden;
}p {
position: absolute;
width: 112px;
/*
1.动画名 move
2.动画时间 6s
3.运动函数 linear 匀速
4.延时执行 1s
5.执行次数 infinite 循环
6.是否倒放 normal 不
*/
animation: move 6s linear 1s infinite normal;
}@keyframes move {
from {
left: -113px;
}to {
left: 600px;
}
}
这是一个通知栏
写在最后 相信聪明的你已经收获很多，但只看不行的哦，多写，你才能真的掌握，加油吧，少年，最后还是如果觉得本文不错，点赞转发，推荐呀，这是对博主写原创最大的鼓励和支持，谢谢
文章图片
推荐阅读
- vue|vue 的4种实现动画方式
- 计算机网络|图解HTTPS非/对称加密，CA证书流程
- 前端|知识图谱编辑器(KG-Editor)
- HTML动画特效-小游戏(第三部)
- 开发|Django开发信息管理系统
- #yyds干货盘点# 前端关于React的小结
- css|css实现全屏网格效果（斜格）
- javascript|jQuery实现一个学生成绩单录入系统
- css|在vue2中vue-router的使用