CSS3——动画

2023-12-28 10:45:50

?

动画

  1. 什么是帧

一段动画,就是一段时间内连续播放n个画面。每一张画面,我们管它叫做“帧”。一定时间内连续快速播放若干个顿,就成了人眼中所看到的动画。同样时间内,播放的帧数越多,画面看起来越流畅。

2.什么是关键帧

关键帧指的是,在构成一段动画的若干帧中,起到决定性作用的 2-3 帧

from和百分比可以混着用,但是一般不建议

?动画的简单定义方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js练习</title>
		<script type="text/javascript">
			
		</script>
		<style>
			/*定义一个动画(定义一组关键帧)*/
			/*开始帧,一般情况下不用设置第一帧*/
			/*动画的名字只能是唯一的*/
			@keyframes wangyoudong{
			from{
				
			}
			/*最后一帧*/
			to{
				transform:translate(900px);
				background-color: red;
			}
			}
			
			.inner{
				width:100px;
				height:100px;
				background-color:deepskyblue;
				/*应用动画到元素*/
				animation-name:wangyoudong;
				/*动画持续时间,必须要写*/
				animation-duration: 3s;
				/*动画延迟时间*/
				animation-delay: 0.5s;
				/*显示完整的动画过程的两种形式:
				 一、把浏览器调整为独立显卡工作模式
				 在浏览器的系统设置中开启“使用硬件加速模式”
				 二、设置延迟也可以显示完整的动画过程*/
			}
		</style>
   </head>
		<body>
			<div class="inner"></div>
		</body>

</html>

?动画的完整定义方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js练习</title>
		<script type="text/javascript">
			
		</script>
		<style>
			/*定义一个动画(定义一组关键帧)*/
			/*开始帧,一般情况下不用设置第一帧*/
			/*动画的名字只能是唯一的*/
			
			 @keyframes wangyoudong2{
			 	0%{
			 		
			 	}
			 	20%{
			 		background-color:greenyellow;
			 	}
			 	40%{
			 		background-color:yellow;
			 	}
			 	60%{
			 		background-color: green;
			 	}
			 	80%{
			 		background-color: pink;
			 	}
			 	100%{
			 		transform:translate(900px);
			 		background-color:orange;
			 	}
			 }
			
			
			.inner{
				width:100px;
				height:100px;
				background-color:deepskyblue;
				/*应用动画到元素*/
				animation-name:wangyoudong2;
				/*动画持续时间,必须要写*/
				animation-duration: 3s;
				/*动画延迟时间*/
				animation-delay: 0.5s;
				/*显示完整的动画过程的两种形式:
				 一、把浏览器调整为独立显卡工作模式
				 在浏览器的系统设置中开启“使用硬件加速模式”
				 二、设置延迟也可以显示完整的动画过程*/
			}
		</style>
   </head>
		<body>
			<div class="inner"></div>
		</body>

</html>

给元素应用动画,用到的属性如下:

1.animation-name: 给元素指定具体的动画 (具体的关键顿)

2. animation-duration : 设置动画所需时间

3 animation-delay : 设置动画延迟

.box (

/* 指定动画 */

animation-name: testKey;

/* 设置动画所需时间 ,这个是必须要写的*/

animation-duration: 5s;

/* 设置动画延退 */

animation-delay: 0.5s;

/*其他属性----start*/

/*设置动画的方式*/

animation-timing-function:linear;

/*动画播放的次数,infinite是无限循环播放*/

animation-iteration-count:infinite; ??

/*动画的方向*/

animation-direction:alternate;

/*动画以外的状态(不发生动画的时候在哪里)*/

/*animation-fill-mode:forwards;*/

.outer:hover .inner{

/*动画的播放状态*/

animation-play-state:paused;

}

可以设置很多的效果和变换

to{

transform: translate(900px) rotate(360deg);

background-color:purple;

border-radius: 50%;

}

ease:平滑过渡--默认值

linear : 线性过渡

ease-in:慢一快

ease-out : 快一慢

ease-in-out : 慢一快一慢

step-start : 等同于 steps(1,start)

step-end :等同于 steps(1, end)

steps( integer,?): 接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是 start 或 end,指定每一步的值发生变化的时间点。第二个参数默认值为 end,

cubic-bezie(number,number,number,number): 特定的贝赛尔曲线类型

animation-iteration-count ,指定动画的播放次数,常用值如下

1 number:动画循环次数

  1. infinite :无限循环

animation-direction ,指定动画方向,常用值如下:

1. normal:正常方向(默认)

2 reverse: 反方向运行

  1. alternate : 动画先正常运行再反方向运行,并持续交替运行
  2. alternate-reverse: 动画先反运行再正方向运行,并持续交替运行

animation-fill-mode,设置动画之外的状态

1 forwards : 设置对象状态为动画结束时的状态

2backwards : 设置对象状态为动画开始时的状态

animation-play-state ,设置动画的播放状态,常用值如下

1 running: 运动(默认)

2 paused:暂停

动画复合属性

只设置一个时间表示 duration,设置两个时间分别是:duration 和 delay ,其他属性没有数量和顺序要求

.inner (

animation :atguigu 3s 0.5s linear 2 alternate-reverse forwards;

备注: animation-play-state 一般单独使用

过渡和动画的区别

/*用过渡实现inner1跑到右边去*/

.inner1{

background-color:orange;

/*谁发生过渡,给谁加*/

transition:3s linear;

}

/*动画不需要触发条件,过渡需要*/

.outer:hover .inner1{

transform:translate(900px);

}

/*动画可以设置精细的过渡效果,过渡不可以*/

/*用动画实现inner2跑到右边去*/

@keyframes donghua{

0%{}

100%{

transform:translate(900px);

}

}

.inner2{

background-color:green;

animation:donghua 3s linear;

}

文章来源:https://blog.csdn.net/JLY19970726/article/details/135237855
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。