CSS动画：transition触发动画和animation非触发动画
|
本篇在讲什么 本章学习通过CSS样式表现动画 本篇适合什么 适合初学H5的小白 适合初学CSS的小白 适合入门的前端程序 本篇需要什么 对Html和css语法有简单认知 Node.js(博主v18.13.0)的开发环境 Npm(博主v8.19.3)的开发环境 依赖VS code编辑器 本篇的特色 具有全流程的图文教学 重实践，轻理论，快速上手 提供全流程的源码内容 |
★提高阅读体验★ ♠ 一级标题♥ 二级标题♣ 三级标题♦ 四级标题 |
目录
- ♠ 触发型动画
-
- ♥ transition动画
-
- ♣ transition的属性
- ♣ 使用方式
- ♣ 使用演示
-
- ♦ 位置变换
- ♦ 角度变换
- ♦ 缩放变换
- ♦ 颜色变换
- ♠ 非触发动画
-
- ♥ animation动画
-
- ♣ animation的属性
-
- ♦ animation-iteration-count类型
- ♦ animation-direction类型
- ♦ animation-play-state类型
- ♦ animation-fill-mode类型
- ♣ 使用方式
-
- ♦ @keyframes
- ♣ 使用演示
-
- ♦ 自动旋转
- ♦ 透明闪烁
- ♠ 推送
- ♠ 结语
♠ 触发型动画
本章节学习通过transition样式执行一些触发型的动画，比如悬停后的变换等
♥ transition动画
css中我们可以通过transition实现一些动画的效果，下面我们看一下怎么使用
♣ transition的属性
| 字段 | 功能 |
|---|---|
| transition-property | 变换的CSS属性 |
| transition-duration | 变换的时间 |
| transition-timing-function | 变换过程的曲线 |
| transition-delay | 变换前的延迟 |
♣ 使用方式
- 使用方式1
transition :width 0.2s ease-in 1s;
属性+时间+曲线+延迟
- 使用方式2
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-delay:1s;
四个属性全部列出来
- 使用方式3
transition: all 1s ease-in 1s
所有属性都变换，all+时间+曲线+延迟
♣ 使用演示
这一模块我们通过演示示例，来展示transition的用法，首先我们创建一个按钮，在网页中间，代码如下所示
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>Documenttitle>
<style>
.btn{
width: 200px;
height: 40px;
background-color: #4dccc6;
margin-top: 20%;
margin-left: 45%;
}
style>
head>
<body>
<div>
<button class="btn">测试按钮button>
div>
body>
html>
♦ 位置变换
通过transform: translate(xx)来设置按钮悬停时候的位置变化
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>Documenttitle>
<style>
.btn{
width: 200px;
height: 40px;
background-color: #4dccc6;
margin-top: 20%;
margin-left: 45%;
}
.btn:hover{
transform: translate(45px);
transition: all 1s ease;
}
style>
head>
<body>
<div>
<button class="btn">测试按钮button>
div>
body>
html>
♦ 角度变换
通过transform: rotate(xx)来设置按钮悬停时候的位置变化
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>Documenttitle>
<style>
.btn{
width: 200px;
height: 40px;
background-color: #4dccc6;
margin-top: 20%;
margin-left: 45%;
}
.btn:hover{
transform: rotate(360deg);
transition: all 1s ease;
}
style>
head>
<body>
<div>
<button class="btn">测试按钮button>
div>
body>
html>
♦ 缩放变换
通过transform: scale(xx)来设置按钮悬停时候的大小变化
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>Documenttitle>
<style>
.btn{
width: 200px;
height: 40px;
background-color: #4dccc6;
margin-top: 20%;
margin-left: 45%;
}
.btn:hover{
transform: scale(0.5);
transition: all 1s ease;
}
style>
head>
<body>
<div>
<button class="btn">测试按钮button>
div>
body>
html>
♦ 颜色变换
通过background-color来设置按钮悬停时候的颜色变化
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>Documenttitle>
<style>
.btn{
width: 200px;
height: 40px;
background-color: #4dccc6;
margin-top: 20%;
margin-left: 45%;
}
.btn:hover{
background-color: #e54611;
transition: all 1s ease;
}
style>
head>
<body>
<div>
<button class="btn">测试按钮button>
div>
body>
html>
很简单也很实用，css的属性都可以通过transition来变换，宽度、颜色等等的
♠ 非触发动画
我们经常需要组件自动去做一些动画效果，为此我们需要用到animtion动画，animation动画是通过定义特殊字段@keyframes书写的动作结构，再通过animation限定的结构执行的
♥ animation动画
css中我们可以通过animation实现一些自动执行的动画效果，下面我们看一下怎么使用
♣ animation的属性
| 字段 | 功能 |
|---|---|
| animation-name | @keyframes定义的动画名 |
| animation-duration | 执行事件 |
| animation-timing-function | 执行的缓动曲线 |
| animation-delay | 执行前的延迟 |
| animation-iteration-count | 动画的播放次数 |
| animation-direction | 执行方式 |
| animation-play-state | 执行状态 |
| animation-fill-mode | 填充模式 |
♦ animation-iteration-count类型
- 默认：1
- infinite：无限循环
♦ animation-direction类型
-
normal：默认，正常
-
reverse：反向运动
-
alternate：正反轮播
-
alternate-reverse：反向播放后，恢复到初始状态
♦ animation-play-state类型
-
running：默认，正常运行
-
paused：暂停动画
♦ animation-fill-mode类型
-
none：默认，执行后恢复到原状态
-
forwards：执行完保持结束状态
-
backwards：延时前永远保持动画初始状态
♣ 使用方式
♦ @keyframes
- @keyframes方式1
@keyframes test1{
from{
transform: rotate(60deg)
}
to{
transform: rotate(360deg)
}
}
关键字@keyframes+动画名
对象from下写css的属性，意味初始状态
对象to下写css的属性，意味结束状态
- @keyframes方式2
@keyframes test2{
0% {
transform: rotate(60deg)
}
50% {
transform: rotate(160deg)
}
100% {
transform: rotate(260deg)
}
}
关键字@keyframes+动画名
百分数指动画的执行进度，50%在动画执行一半时达到的状态
- @keyframes方式3
@keyframes test3{
0% {
transform: rotate(60deg)
}
50% {
transform: rotate(160deg)
}
to{
transform: rotate(360deg)
}
}
方式1和方式2可以混用
- animation执行方式1
animation-name: test1;
animation-duration: 2s;
animation-dela：1s;
animation-iteration-count: infinite;
animation属性字段+参数
- animation执行方式2
animation: test1 2s 1s infinite;
animation:参数
♣ 使用演示
以下我们通过代码和演示制作几个可以自动执行的动画
♦ 自动旋转
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>Documenttitle>
<style>
.btn{
width: 200px;
height: 40px;
background-color: #4dccc6;
margin-top: 20%;
margin-left: 45%;
animation: test 2s infinite;
}
@keyframes test{
0% {
transform: rotate(0deg)
}
50% {
transform: rotate(160deg)
}
100% {
transform: rotate(360deg)
}
}
style>
head>
<body>
<div>
<button class="btn">测试按钮button>
div>
body>
html>
♦ 透明闪烁
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>Documenttitle>
<style>
.btn{
width: 200px;
height: 40px;
background-color: #4dccc6;
margin-top: 20%;
margin-left: 45%;
animation: test 1s infinite;
}
@keyframes test{
0% {
opacity:0;
}
50% {
opacity:1;
}
100% {
opacity:0;
}
}
style>
head>
<body>
<div>
<button class="btn">测试按钮button>
div>
body>
html>
♠ 推送
- Github
https://github.com/KingSun5
♠ 结语
若是觉得博主的文章写的不错，不妨关注一下博主，点赞一下博文，另博主能力有限，若文中有出现什么错误的地方，欢迎各位评论指摘。