05-CSS-动画@keyframes

Gy-qwert

已于 2024-02-18 20:50:54 修改

阅读量856

点赞数

分类专栏： javaweb-HTML\CSS\JS\jQuery 文章标签： css 动画 css3

于 2023-05-21 14:03:51 首次发布

本文链接：https://blog.csdn.net/qq_47128897/article/details/130791152

版权

本文介绍了CSS3中的关键帧动画，通过@keyframes规则定义关键帧集，详细阐述了如何设置不同时间点的元素样式。同时讲解了动画属性，包括动画名称、时长等，用于控制动画的执行方式和时间。示例代码展示了如何创建并应用动画，以实现元素尺寸变化的动画效果。

摘要由CSDN通过智能技术生成

CSS 动画是一种通过在元素内部或外部的 HTML 和 CSS 属性之间定义关键帧集来创建复杂的动画效果的技术。通常，CSS 动画由两个主要组成部分：关键帧集和动画属性。

1、关键帧集：关键帧表示一个动画过程中重要的时间点，并且每个关键帧包含该时间点所对应的元素状态和样式。在 CSS 中，使用 `@keyframes` 规则来定义关键帧集。

下面的代码定义了一个简单的关键帧集，这个关键帧集包括三个关键帧（from、50%、to），在 from 关键帧中，元素的宽度为 100px，高度为 100px，在 to 关键帧中，元素的宽度为 300px，高度为 300px，在 50% 的关键帧中，元素的宽度为 200px，高度为 200px。

@keyframes myAnimation {
  from {
    width: 100px;
    height: 100px;
  }
  
  50% {
    width: 200px;
    height: 200px;
  }
  
  to {
    width: 300px;
    height: 300px;
  } 
}

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称
规定动画的时长

把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
	from {background:red;}
	to {background:yellow;}
}

</style>
</head>
<body>

<div></div>

</body>
</html>

可以改变任意多的样式任意多的次数。
用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
应该始终定义 0% 和 100% 选择器。

改变背景色和位置：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:myfirst 5s;
}

@keyframes myfirst
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

</style>
</head>
<body>

<div></div>

</body>
</html>

2、动画属性：动画属性用于描述动画如何进行以及应该多长时间完成。

下表列出了 @keyframes 规则和所有 CSS 动画属性：

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

下面的表格中列出了 CSS 中的动画相关属性：

属性	TIY
background	试一试
background-color	试一试
background-position	试一试
background-size	试一试
border	试一试
border-bottom	试一试
border-bottom-color	试一试

最低0.47元/天解锁文章

Gy-qwert

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05-CSS-动画@keyframes

下面的代码定义了一个简单的关键帧集，这个关键帧集包括三个关键帧（from、50%、to），在 from 关键帧中，元素的宽度为 100px，高度为 100px，在 to 关键帧中，元素的宽度为 300px，高度为 300px，在 50% 的关键帧中，元素的宽度为 200px，高度为 200px。from {50% {to {当在@keyframes创建动画，把它绑定到一个选择器，否则动画不会有任何效果。规定动画的名称规定动画的时长
复制链接

扫一扫