CSS3动画animation

一、语法

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的效果

三、案例


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>

相关阅读:
旧版elasticsearch 2.3.4 集群部署过程
08: value too great for base (error token is “08“)
【STM32】驱动库的选择：CMSIS Driver、SPL、HAL、LL | 在ARM MDK、STM32Cube中如何选择？
【LeetCode】插入区间
【Linux进阶之路】进程（中）—— 进程地址空间
在Qt5中SQLite3的使用
serine-PEG-OVA 丝氨酸-聚乙二醇-卵清蛋白，serine-Ovalbumin，丝氨酸修饰鸡卵白蛋白
经典c程序100例==61--100
SpringCloud 完整版--（Spring Cloud Netflix 体系）
全局Ceph节点宕机处理

原文地址：https://blog.csdn.net/qq_52421092/article/details/126160250