css动画-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52350720/article/details/133048596

本文介绍了如何使用CSS3创建动画，包括@keyframes规则的使用、动画属性如名称、持续时间、延迟、播放次数、方向、运动曲线和填充模式的设置。通过实例演示了如何为div元素应用动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

9.22学习

一、动画

要创建 CSS3 动画，你需要了解 @keyframes 规则。@keyframes 规则是创建动画。@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>动画</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
}
@keyframes myfirst
{
	from {background:red;}
	to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

要创建 CSS3 动画，你需要了解 @keyframes 规则。
animation: 选择器的关键名称、动画时间、运动曲线、开始的时间、播放次数、是否反复播放、是否运用最后一帧动画的样式、是否暂停或播放;

二、动画属性

1.animation-name
指定要绑定到选择器的关键帧的名称.
例:@keyframes 名称{}
2.animation-duration
动画指定需要多少秒或毫秒完成.
3.animation-delay
设置动画启动前的延时启动
4.animation-iteration-count
定义动画的播放次数。
infinite 无限播放
5.animation-direction
指定是否应该轮流反向播放动画。
以下一些属性值
(1)normal默认值
(2)normal反向播放
(3)alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
(4)alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
6.animation-timing-function
设置动画将如何完成一个周期
(1)linear动画从头到尾的速度是相同的。
(2)ease默认。动画以低速开始，然后加快，在结束前变慢。
(3)ease-in动画以低速开始。
(4)ease-out动画以低速开始.
(5)ease-in-out动画以低速开始和结束。
7.animation-fill-mode
规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
8.animation-play-state
指定动画是否正在运行或已暂停。

以下是代码里的笔记，自己可以去试一试

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>动画</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
  /* 指定要绑定到选择器的关键帧的名称 */
  animation-name: myfirst;
  /* 动画指定需要多少秒或毫秒完成 */
  animation-duration: 1s;
  /* 设置动画将如何完成一个周期 */
  animation-timing-function: ease;
  /* 设置动画在启动前的延迟间隔 */
  animation-delay: 2s;
  /* 定义动画的播放次数 */
  animation-iteration-count: 1;
  /* 指定是否应该轮流反向播放动画 */
  animation-direction: alternate;
  /* 指定动画是否正在运行或已暂停 */
  animation-play-state: paused;
  /* 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 */
  animation-fill-mode: forwards;
  /* animation: 动画名称，时间，运动曲线，开始时间
  ，播放次数，反向播放，结束的样式，动画是否暂停; */
}
@keyframes myfirst
{
	from {background:red;}
	to {background:black;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>