CSS3动画

最新推荐文章于 2024-04-17 01:37:33 发布

月亮和我

最新推荐文章于 2024-04-17 01:37:33 发布

阅读量176

点赞数 1

文章标签： css3 html

本文链接：https://blog.csdn.net/weixin_44356010/article/details/104714970

版权

CSS3动画（逆战班）

1、@keyframes规则
要创建动画，你需要你需要了解@keyframes规则：

@keyframes规则是创建动画。
@keyframes规则内指定一个css样式和动画将逐渐从目前的样式更改为新的样式。

2、兼容浏览器
在这里插入图片描述
3、动画属性

transform（直接动画、转换动画）

1）rotate(旋转)

三种形态rotateX()、rotateY()、rotateZ(默认).
案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box{
				width: 150px;
				height: 150px;
				background: red;
				margin:50px auto;
				transform: rotate(45deg);
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

在这里插入图片描述

2）skew（倾斜变形）

两种形态 skewX(默认)、skewY()。
案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box{
				width: 150px;
				height: 150px;
				background: red;
				margin:50px auto;
				transform: skew(45deg);
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

在这里插入图片描述
3）translate（平移）

三种形态translateX(默认)、translateY()、translateZ()。
案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box{
				width: 150px;
				height: 150px;
				background: red;
				margin:50px auto;
				transform: translate(100px);
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

在这里插入图片描述
4）scale（缩放、变形）

当scale一个参数时，是按等比例缩放。
当scale两个参数时，是按宽度和高度的比例缩放。
案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box{
				width: 150px;
				height: 150px;
				background: red;
				margin:50px auto;
				transform: scale(0.5);
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

在这里插入图片描述

transition(过渡动画 )

teansition-property（过渡的属性）
transition-delay（延迟的时间）
transition-duration（动画过渡的时间）
transition-timing-function过渡效果的时间曲线：linear（匀速）、ease（慢-快-慢）、ease-in（慢到快）、ease-out（快到慢）、ease-in-out（开始和结束慢）

代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.wrap{
				width: 500px;
				height: 500px;
				margin: 100px auto;
			}
			.box{
				width: 150px;
				height: 150px;
				background: red;
				margin:50px auto;
				transition: all 2s linear;
			}
			.box:hover{
				transform: translate(300px);
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="box"></div>
		</div>
	</body>
</html>

animation(帧动画)

1、animation-name (必要的)

检索或设置对象所应用的动画名称
必须与规则@keyframes配合使用，
定义关键帧：
@keyframes mymove{} animation-name:mymove;

语法一：@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
语法二：@keyframes mymove{
0%{初始状态属性}
100%{结束状态属性}
}

0% = from ; 100% = to

2、animation-duration (必要的)

检索或设置对象动画的持续时间（s,ms）
说明：animation-duration:3s; 动画完成使用的时间为3s

3、animation-delay

检索或设置对象动画延迟的时间（s,ms）
说明：animation-delay:0.5s; 动画开始前延迟的时间为0.5s)

4、animation-timing-function

检索或设置对象动画的过渡类型
属性值：
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) 默认值；
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start:马上跳到动画每一结束桢的状态 (实现逐帧动画效果)

5、animation-iteration-count

检索或设置对象动画的循环次数
属性值：
animation-iteration-count: infinite | number;

infinite：无限循环
number: 循环的次数

6、animation-direction

检索或设置对象动画在循环中是否反向运动
属性值：
normal：正常方向 0% —— 100%
reverse：反方向运行 100% —— 0%
alternate：动画先正常运行再反方向运行，并持续交替运行 0% —— 100% —— 0%；
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
100% —— 0% —— 100%

7、animation-fill-mode

说明：规定动画播放之前或之后，其动画效果是否可见。

none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards : 在延迟的情况下，让0%在延迟前生效
forwards : 在运动结束的之后，停到结束位置（重点记忆）
both : backwards和forwards同时生效

8、animation-play-state
检索或设置对象动画的状态
属性值：
animation-play-state:running | paused;
running:运动 (默认值)
paused: 暂停

注：通过鼠标某些事件时添加的；animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行

月亮和我

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画

CSS3动画（逆战班）1、@keyframes规则      要创建动画，你需要你需要了解@keyframes规则：@keyframes规则是创建动画。@keyframes规则内指定一个css样式和动画将逐渐从目前的样式更改为新的样式。2、兼容浏览器3、动画属性transform（直接动画、转换动画）1）rota...
复制链接

扫一扫