css 过度与动画
过度
- 流程：
① 给要过渡的元素设置初始状态；
② 设置要过渡的元素设置最终状态；
③ 给要过渡的html标签设置过渡属性【必须值为过渡时间】
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: gray;
transition: 5s;
}
div:hover{
height: 500px;
width: 500px;
background: rgb(160, 99, 99);
}
</style>
</head>
<body>
<div>
- 过渡属性值详解
(1) 过渡属性transition-property：该属性是用来指定当元素其中一个属性改变时执行的过渡动画效果，该属性有三种类型的值：
① none 将过渡效果设置为“无过渡效果”，或停止当前过渡效果。
② all （默认）为所支持的所有CSS属性在值变化时执行动画过渡效果。
③ [property name] 指定一个或多个属性名称列表，以逗号“,”进行分隔，当指定的属性产生变化时，为其执行指定属性的动画过渡效果。
(2)过渡时间 transition-duration：该属性是用于设定一个属性的值过渡被触发开始时到结束时所需要经历的时间，单位为秒（s），如：“0.3s”或“.3s”,它的默认值为“0”，单位不能省略，否则过渡动画无法执行。
(3)过渡时间曲线transition-timing-function
该属性允许你根据时间的推进去改变属性值的变换速率，目前它可能够设置6个类型的值：
ease默认值，逐渐减速。
linear匀速。
ease-in加速。
ease-out减速。
ease-in-out先加速，后减速。
提示
通过cubic-bezier([参数])设置贝塞尔曲线也能做到时间曲线控制，但是较为复杂，有兴趣可以去私下研究下。
(4)过渡延迟transition-delay
该属性规定在用户进行操作后多久开始执行动画，也就是延迟执行过渡动画的时间，单位同样是秒“s”，写法与“transition-duration”一致，默认值同样为“0”。
(5)综合值transition
和其它大多数CSS样式设置属性一样，transition属性也支持多值组合的写法，而且也是实际开发中最为常用的写法，能大大地节约代码量。
但在编写该属性的时候要注意允许过渡的属性一般只写成all或者单个属性名，如果写成由逗号分隔的属性集合，如果写出以逗号分隔的属性集合，那么就只会使用最后一个属性为运行过过渡的属性。
Css动画
- css动画和css过渡的区别
(1)动画可以不需要任何事件的激活（当然也可以通过事件激活）让元素本身就“挂载”一系列的CSS属性变化，即一初始化就开始执行动画
(2)动画可以单独地存在并被不同的标签元素调用。
(3)默认动画返回时是一瞬间完成，而不像过渡一样缓慢的还原。【除非让动画的终止状态为初始状态的样式】
(4)动画能够“无限次”地执行动画。
- css动画使用流程
(1)定义一个动画
(2)在html元素中调用需要的动画（调用后时可以设置各种动画相关属性）
- css动画使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
height: 200px;
width: 200px;
background: rgb(185, 81, 81);
animation: my-a-name 2s;
}
/* @keyframes：用于声明一个动画，后面跟动画名称与动画实现 */
@keyframes my-a-name {
/* 动画执行过程 */
from {
width: 200px;
}
to {
width: 500px;
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
css动画定义方式
/* @keyframes：用于声明一个动画，后面跟动画名称与动画实现 */
@keyframes my-a-name {
/* 动画执行过程 */
}
css动画过程定义
定义动画过程有两种方式，一种为“英文单词”定义模式，一种为“百分数”定义模式。
英文单词模式
from：表示动画开始时执行的CSS属性
to： 表示动画结束时执行的CSS属性
英文模式
@keyframes my-a-name {
/* 动画执行过程 */
from {
width: 200px;
}
to {
width: 500px;
}
}
百分数模式
该模式能够支持从“0%”到“100%”之间的所有帧的定义
“0%”相当于“from”，表示动画开始帧，
“100%”相当于“to”，表示动画结束帧。
代码：
/* @keyframes：用于声明一个动画，后面跟动画名称与动画实现 */
@keyframes my-a-name {
/* 动画执行过程 */
0% {
width: 200px;
height: 200px;
}
}
50% {
width: 800px;
height: 800px;
background: rgb(136, 64, 204);
}
100% {
width: 200px;
height: 200px;
}
}
注意事项
动画如果是从0%或者from开始变化的，那么我们应该让0%或者from的状态为标签元素的初始状态。否则会导致动画开始时发生突变。（由标签的当前状态突变为动画的0%或者from的状态）可以加个动画延时进行显示的查看。
-
在变化过程中，单词模式和百分比模式可以混用。
-
在动画执行过程中，如果从当前状态到下一个状态，如果想要从上一个状态开始动的而不是瞬间动的，需要在下一个状态设置上一个状态不变的动画属性
围绕网页旋转的动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,body{
height: 100%;
margin: 0;
}
div {
height: 10%;
width: 10%;
background: rgb(185, 81, 81);
position: relative;
animation: my-a-name 10s;
}
/* @keyframes：用于声明一个动画，后面跟动画名称与动画实现 */
@keyframes my-a-name {
/* 动画执行过程 */
0% {
right: 0;
}
25% {
right: -90%;
bottom: 0;
}
50%{
right: -90%;
bottom: -90%;
}
75%{
right: 0;
bottom: -90%;
}
to {
/* right: -500px; */
bottom: 0;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 调用css动画时的属性
(1)动画名称与执行时间“animation-name/animation-duration”
动画名称与执行时间这是执行动画所必须的属性，否则无法调用此动画。
(2)动画时间曲线“animation-timing-function”
和过渡时间曲线一样。
(3)动画时间的延迟“animation-delay”
和过渡时间的延迟一样
(4)动画播放的次数“animation-iteration-count”
它可以设置3种类型的值：
1（默认值）表示只执行1次动画。
[number] 任意正整数，表示执行[numver]次动画。
infinite表示在执行某事件后“无限次”执行动画。
(5)动画周期逆向播放“animation-direction”
默认动画执行一次后会瞬间返回，然后我们可以设置此属性用来让他返回时也进行动画，称为逆向动画。
逆向动画播放的进行时间和“正向播放”一致，时间速度曲线会按照“100%（to）”到“0%（from）”的方向进行。
normal 默认值。动画应该正常播放。
alternate 动画应该轮流反向播放。
注意：此属性需要和animation-iteration-count动画播放次数配合使用，因为逆向播放也是执行一次动画，所以想要让逆向播放生效，播放次数最低要大于等于两次。
如：animation-iteration-count:3;
animation-direction: alternate;
(6)动画的播放和暂停“animation-play-state”
该属性用于设置动画的播放和暂停状态，它有两个值：
running 播放动画。
paused 暂停动画。
我们可以设置hover属性来体验动画播放和暂停的效果
div:hover{
animation-play-state:paused;
}
(7)设定元素动画形态“animation-fill-mode”
默认情况，动画执行完成后会回到未执行动画的初始状态去，那么有时候我们不想让他又还原，我们就可以设置其动画最终形态
这个属性的可选值如下
backwards : 在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义，from或0%的状态）
forwards: 让元素执行动画后不还原
both: 在动画执行前保持from或0%的状态，动画执行完成后又保持动画最后一刻的属性。（100%或to哪一个的状态）
(8)组合值的写法“animation
animation:
name duration timing-function delay iteration-count direction fill-mode;