前言
CSS-transition过渡动画【看这一篇就够了!!】-CSDN博客
animation自定义动画
通常我们需要使用自定义动画,需要分两步:
- 第一步:定义动画
- 第二步:调用动画
动画的定义
使用@keyframes关键帧来定义动画
- 创建动画的原理是,将一套CSS样式逐渐变化为另一套样式
- 在动画过程中,可以多次更改CSS样式的设定
- 动画执行各阶段时间,可以通过百分比来改变发生的时间,或者通过关键词“from”和“to”
- from和to等价于0%和100%,from和0%是动画的开始时间,to和100%是动画的结束时间
语法
@keyframes 动画名 {
/* 起始状态 */
from { 样式 }
/* 结束状态 */
to { 样式 }
}
/* 或 */
@keyframes 动画名 {
/* 起始状态 */
0% { 样式 }
/* 结束状态 */
100% { 样式 }
}
定义一个动画
/*
@keyframes 表示定义动画
changeBox:动画的名字
0% :表示起始状态
100% :表示结束状态
*/
@keyframes changeBox {
0% {
width: 200px;
height: 200px;
}
100% {
width: 400px;
height: 400px;
}
}
调用动画
动画定义好之后,我们需要使用“animation”属性来调用动画
animation: 动画名 动画完成时间 时间函数 延迟时间;
<style>
.box {
width: 50px;
height: 50px;
background-color: red;
/* 调用动画:动画名 动画执行时间; */
animation: changeBox 5s;
}
/* 定义动画 动画名为 changeBox */
@keyframes changeBox {
/*
0% {
width: 50px;
height: 50px;
}
100% {
width: 200px;
height: 200px;
}
*/
/* 起始状态 */
from {
width: 50px;
height: 50px;
}
/* 结束状态 */
to {
width: 200px;
height: 200px;
}
}
</style>
<body>
<div class="box"></div>
</body>
效果:
多关键帧动画
用百分比%,分别表示动画执行的时间节点
<style>
.box {
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
/*
调用动画
mymove 动画名
4s 动画执行时间
ease 动画速度
0s 动画延迟时间
*/
animation: mymove 4s ease 0s;
}
@keyframes mymove {
/* 起始状态 0s */
0% {
top: 0px;
left: 0px;
background: red;
}
/* 1秒后 */
25% {
top: 0px;
left: 100px;
background: blue;
}
/* 2秒后 */
50% {
top: 100px;
left: 100px;
background: yellow;
}
/* 3秒后 */
75% {
top: 100px;
left: 0px;
background: green;
}
/* 4秒 结束状态 */
100% {
top: 0px;
left: 0px;
background: red;
}
}
</style>
<body>
<div class="box"></div>
</body>
效果:
animation完整写法
animation这个属性,相当于是下面表格中所有属性的复合写法
animation: 动画名 动画完成时间 时间函数 延迟时间 播放次数 是否返向播放 动画不播放或完成时的状态 动画是否正在运行或已暂停;
属性 | 说明 | 属性值 |
---|---|---|
animation-name | 指定应用的一系列动画名,即@keyframes 定义的动画名 | none 表示不调用动画 动画名:由大小写敏感的字母 a-z、数字 0-9、下划线 (_) 和/或横线 (-) 组成。不能以数字开头 |
animation-duration | 指定动画周期时长,需要多少秒或毫秒完成 | 默认值为 0s,表示无动画。 时长单位为秒(s)或者毫秒(ms) 如: 1s ,2s |
animation-timing-function | 设置动画将如何完成一个周期 | linear(直线匀速) ease(慢-快-慢) ease-in(慢-快) ease-out(快-慢) ease-in-out(慢-快-慢) 贝塞尔函数表示 cubic-bezier(0.84,-0.21, 1,-0.15) steps(n,start|end) |
animation-delay | 设置动画在启动前的延迟间隔时间 | 默认值为 0s,表示立即执行 时长单位为秒(s)或者毫秒(ms) 如: 1s ,2s |
animation-iteration-count | 定义动画的播放次数。 | n:一个数字,动画播放次数 infinite:无限次播放 |
animation-direction | 指定是否应该轮流反向播放动画。 | normal : 默认值。动画正常播放reverse :动画反向播放,动画按步后退的效果alternate : 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。alternate-reverse : 动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。 |
animation-fill-mode | 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。 | none : 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。forwards : 在动画结束后,动画将停止在最后结束的状态backwards :在动画结束后,动画将停止在最开始的状态both : 动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性 |
animation-play-state | 指定动画是否正在运行或已暂停。 | paused 暂停动画running 正在运行动画 |
animation-fill-mode
animation-fill-mode : 动画不播放或完成或当动画有一个延迟未开始播放时,要应用到元素的样式
none
: 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。forwards
: 在动画结束后,动画将停止在最后结束的状态backwards
:在动画结束后,动画将停止在最开始的状态both
: 动画遵循forwards
和backwards
的规则。也就是说,动画会在两个方向上扩展动画属性(很少用)
forwards时 | backwards时 |
---|---|
![]() | ![]() |
animation-play-state
animation-play-state 指定动画是否正在运行或已暂停
属性值 说明 paused 暂停动画 running 运行动画 animation-play-state通常与“:hover”配合来使用,当鼠标滑动上去时,可以暂停或开启动画
<style>
.box {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
left: 0;
top: 0;
/* 动画名 执行时间 匀速 延迟0s */
animation: mymove 5s linear 0s 1;
}
@keyframes mymove {
0% {
top: 0;
left: 0;
color: yellow;
}
50% {
top: 0px;
left: 200px;
}
100% {
top: 200px;
left: 200px;
}
}
/* 鼠标滑动上去,暂停动画执行 */
.box:hover {
animation-play-state: paused;
}
</style>
<body>
<div class="box"></div>
</body>
效果:
animation指定多组动画
animation属性用来指定一组或多组动画,每组之间用“逗号”隔开
animation: am1 2s, am2 2s 2s forwards;
<style>
.box {
width: 100px;
height: 100px;
background-color: skyblue;
/*
move1 :动画1 执行时间2s
bgcolor:动画2 执行时间2s 延迟2s执行,执行后动画停止在结束的状态
*/
animation: move1 2s, bgcolor 2s 2s forwards;
}
@keyframes move1 {
0% {
width: 100px;
height: 100px;
}
100% {
width: 200px;
height: 200px;
}
}
@keyframes bgcolor {
0% {
width: 200px;
height: 200px;
background-color: khaki;
}
100% {
background-color: red;
}
}
</style>
<body>
<div class="box"></div>
</body>
效果
steps帧动画
steps定义一个动画从开始到结束,动画的每一帧中经历的步数
/*
n: 整数,表示分几步执行完
start:开始是在第一帧动画结束的位置
end:开始是在第一帧动画开始的位置
*/
steps(n,start|end)
<style>
body {
margin: 0;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
top: 0;
left: 0;
/* 分五步,第一步在第一帧结束的位置 */
animation: move 5s steps(5, start);
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 500px;
}
}
/* 这个是用来做参考的,参考500px的位置在哪里 */
.box2 {
width: 500px;
background-color: red;
height: 20px;
}
</style>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
效果:
steps(5,end) | steps(5,start) |
---|---|
![]() | ![]() |
steps的特殊性
steps是设置的每一步动画的跳跃步数,而不是整个动画的跳跃部署
<style>
body {
margin: 0;
}
.box {
width: 100px;
height: 100px;
background-color: rgb(138, 210, 238, 0.5);
position: absolute;
top: 0;
left: 0;
/* 分五步,第一步在第一帧结束的位置 */
animation: move 5s steps(5, start);
}
@keyframes move {
0% {
left: 0;
}
50% {
left: 100px;
}
100% {
left: 500px;
}
}
/* 这个是用来做参考的,参考500px的位置在哪里 */
.box2 {
width: 500px;
background-color: red;
height: 20px;
}
/* 这个是用来做参考的,参考100px的位置在哪里 */
.box3 {
width: 100px;
background-color: khaki;
height: 10px;
}
</style>
<body>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
效果:
transition与animation的区别
区别
- transition是过渡,是样式值的变化的过程,只有开始和结束
- animation也叫关键帧,通过和@keyframe结合可以设置中间帧的一个状态
- animation配合@keyframe可以不触发事件就触发这个过程,而transition需要通过hover或者js事件来配合触发
- animation可以设置很多的属性,比如循环次数,动画结束的状态等等,transition只能触发一次
- animation可以结合keyframe设置每一帧,但是transition只有两帧(开始和结束)
CSS3实现网站全屏加载动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<style>
body {
margin: 0;
}
.container {
position: relative;
width: 100%;
height: 100vh;
background-color: aqua;
/* 消除抖动 防止页面缩放时 出现滚动条 */
overflow: hidden;
}
.box {
position: absolute;
width: 1080px;
height: 540px;
background-color: blueviolet;
top:50%;
left: 50%;
margin-top: -240px;
margin-left: -540px;
}
.box .item {
float: left;
margin: 10px;
}
.item1{
width: 250px;
height: 520px;
background-image: linear-gradient(to bottom,#fff,pink);
}
.item2,.item3 {
width: 385px;
height: 250px;
background-image: linear-gradient(to bottom,pink,#fff);
}
.item4,.item5,.item6{
width: 250px;
height: 250px;
background-image: linear-gradient(to bottom,#fff,pink);
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="item item1 animate__animated animate__backInDown"></div>
<div class="item item2 animate__animated animate__backInLeft"></div>
<div class="item item3 animate__animated animate__backInRight"></div>
<div class="item item4 animate__animated animate__backInUp"></div>
<div class="item item5 animate__animated animate__bounceInUp"></div>
<div class="item item6 animate__animated animate__bounceInRight"></div>
</div>
</div>
</body>
</html>
效果: