CSS-animation自定义动画【看这一篇就够了！】

是洋洋a

已于 2024-09-08 12:21:08 修改

阅读量3k

点赞数 40

分类专栏：前端 CSS HTML 文章标签： css html 前端

于 2024-09-04 17:17:13 首次发布

本文链接：https://blog.csdn.net/zheshiyangyang/article/details/141895206

版权

前端同时被 3 个专栏收录

81 篇文章

订阅专栏

CSS

28 篇文章

订阅专栏

HTML

12 篇文章

订阅专栏

前言

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”配合来使用，当鼠标滑动上去时，可以暂停或开启动画

属性值	说明
paused	暂停动画
running	运行动画

<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>

效果：