过渡和动画的基本介绍
- 过渡初始
-
- 过渡的四大要素
- 过渡的简写方式
- 动画的创建
- 动画的七大要素
- 动画的播放和暂停
- 过渡和动画的区别
过渡初始
过渡：元素从一种样式变换为另一种样式时为元素添加效果
过渡不同于动画，他不会无缘无故的发生，过渡必须要触发一个事件才能实现效果，鼠标在hover状态下相当于一个移入事件
过渡的四大要素
1、要控制的css属性名，默认值：all，不是必需
2、完成过渡需要的时间，s,ms 1000ms=1s 必须要有
3、过渡的速度曲线，不是必需，ease默认值
ease 变速，规定慢速开始，然后变快，然后慢速结束的过渡效果
linear 匀速，规定以相同速度开始至结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值可能的值是0至1之间的数值
4、过渡延迟时间，s,ms
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡的四大要素</title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
/*多个属性可以逗号隔开*/
/*要控制的css属性名*/
transition-property:width,background,height ;
/*完成过渡需要的时间*/
transition-duration: 2s,3s,5s;
/*过渡的速度曲线*/
/*transition-timing-function: linear;*/
transition-timing-function: linear,linear,ease;
/*过渡延迟时间，s，ms*/
transition-delay: 500ms,300ms,500ms;
}
.box:hover{
background: blue;
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
过渡的简写方式
- 所有要控制的样式使用相同的过渡方式
- 属性值依次：all 完成过渡的时间 速度曲线 延迟开始时间
- 如果使用变速，速度曲线也可以不写
- 如果延迟开始时间没有，也可以不写
- 要控制的样式使用不同的过度方法
- 对要控制的css属性分组，每一组可以书写不同的过渡方式，组与组之间用逗号隔开
- 每一组书写方法：要控制的css属性名 完成过渡的时间 速度曲线 延迟开始时间
- 如果哪一组的值使用默认值，也可以不写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡的简写方式</title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
/*transition: all 2s linear 1s;*/
/*transition: 2s linear 1s;*/
/*transition: 2s;*/
transition: width 2s 1s,height 3s,background 4s linear 1s;
}
.box:hover{
background: blue;
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
动画的创建
动画，通过改变元素的样式给元素添加动画
动画的创建有两种方式：
- from-to :from{}代表动画开始；to{}代表动画结束
- 百分比创建动画（推荐使用）：0%{};代表动画开始，后面可以设置多个关键帧，如：50%{};80%{}……，100%{};代表动画结束。
- @keyframes用于创建一个动画，动画名称自己设置
- 语法：animation：要绑定的动画名称 动画完成的时间 速度曲线 延迟开始时间 播放次数 轮流反向播放 保持最后状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画初始</title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
/*animation: name 10s linear 3s;*/
/*语法*/
/* animation：要绑定的动画名称 动画完成的时间 速度曲线 延迟开始时间 播放次数 轮流反向播放 保持最后状态*/
/* 延迟开始时间： s,ms*/
/* 播放次数：默认值为1次，infinite无限次播放*/
/*animation: name 5s 2;*/
/*animation: name 2s infinite;*/
/*轮流反向播放：默认值normal，轮流反向播放alternate，必须要有播放次数*/
/*animation: name 5s 2 alternate;*/
/*保持最后的状态：forwards*/
animation: name 5s forwards;
}
/*@keyframes用于创建一个动画，动画名称自己设置*/
@keyframes name {
/*!*动画开始*!*/
/*from{width: 100px;height: 100px;background: red;}*/
/*!*动画结束*!*/
/*to{width: 500px;height: 500px;background: blue;}*/
/*百分比指的是动画完成时的百分比*/
0%{width: 100px;height: 100px;background: red;}
30%{width: 200px;height: 300px;background: green;}
50%{width: 200px;height: 300px;background: green;}
80%{width: 200px;height: 300px;background: yellow;}
100%{width: 500px;height: 500px;background: blue;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
动画的七大要素
1.要绑定的动画名称：必须要有
2. 动画完成的时间：必须要有 s,ms
3. 速度曲线，默认ease变速，凡是只要过渡能用的动画都能用
4. 延迟开始时间： s,ms
5. 播放次数：默认值为1次，infinite无限次播放
6. 轮流反向播放：默认值normal，轮流反向播放alternate，必须要有播放次数
7. 保持最后的状态：forwards
动画的播放和暂停
animation-play-state规定动画播放（running）还是暂停（paused）
动画的暂停：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画的暂停</title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
animation: name 10s;
}
.box:hover{
animation-play-state: paused;
}
/*@keyframes用于创建一个动画，动画名称自己设置*/
@keyframes name {
0%{width: 100px;height: 100px;background: red;}
100%{width: 500px;height: 500px;background: blue;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
动画的播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画的播放</title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
animation: name 10s;
animation-play-state: paused;
.box:hover{
animation-play-state: running;
}
/*@keyframes用于创建一个动画，动画名称自己设置*/
@keyframes name {
0%{width: 100px;height: 100px;background: red;}
100%{width: 500px;height: 500px;background: blue;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
过渡和动画的区别
1.过渡需要事件触发，动画不需要事件触发
2.过渡只有开始-结束，动画可以设置多个关键帧
![龙珠训练营task04[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)