CSS3动画animation

郑建零零发

已于 2022-11-16 19:40:44 修改

阅读量737

点赞数 1

分类专栏： css3 文章标签： css3 动画 javascript

于 2022-08-04 15:41:21 首次发布

本文链接：https://blog.csdn.net/qq_52421092/article/details/126160250

版权

css3 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、语法

animation: animation-name(创建的动画名)

animation-duration(动画时间)

animation-timing-function(动画方式)

animation-delay(延迟时间)

animation-iteration-count(动画的播放次数)

animation-direction(动画的播放方向)

animation-play-state(动画的播放状态)

animation-fill-mode(动画发生的操作)；

二、详细介绍

1.动画的动画方式（animation-timing-function）

linear：匀速运动

ease：速度由快到慢（默认值）

ease-in：速度越来越快

ease-out：速度越来越慢

ease-in-out：速度先加速再减速

2.动画的播放次数（animation-iteration-count）

默认值为1

infinite：循环

3.动画的播放方向（animation-direction）

normal：动画每次都是循环向前播放

alternate：动画播放为偶数次则向前播放

4.动画的播放状态（animation-play-state）

running：将暂停的动画重新播放

paused：将正在播放的元素动画停下来

5.动画发生的操作（animation-fill-mode）

forwards：表示动画在结束后继续应用最后关键帧的位置

backwards：表示会在向元素应用动画样式时迅速应用动画的初始帧

both：表示元素动画同时具有forwards和backwards的效果

三、案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				height: 30px;
				width: 30px;
				background-color: red;	
				animation: donghua 1s linear 0s infinite normal;
			}		
			@keyframes donghua{
				0%{
					transform: translate(0px,0px);	
				}
				25%{
					transform: translate(50px,0px);
				}
				50%{   
					transform: translate(100px,0px);
				}
				75%{
					transform: translate(50px,0px);
				}
				100%{
					transform: translate(0px,0px);
				}				
		</style>		
	</head>
	<body>	
		<div></div>
	</body>
</html>