css-动画

WGenji Lv4
  2024-08-26 13:51:51 2024-08-26 13:51:51 Created   2024-08-26 13:51:51 2024-08-26 13:51:51 Updated      

1.定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//第一种方法 只有起始帧和结束帧2个动作,中间自动补帧
@keyframes action{
	from{
		
	}//可不写
	to{
	
	}
}
//第二种方法	可以定义起始帧和结束帧持续时间中多个动作状态
@keyframes action{
	0%{	

	}
	50%{	

	}
	100%{
	
	}
}

2.调用

image-20220329191411724

infinite: 无线循环动画

alternate: 反向,来回执行动画

forwards: 动画结束停留在最后一帧状态

linear: 动画匀速运行

暂停动画

1
animation-play-state: paused;

逐帧动画 (CSS默认为补间动画)

1
animation: steps()

多组动画使用逗号隔开

1
animation: action,action2

动画效果脱标，不影响布局

  • Title: css-动画
  • Author: WGenji
  • Created at : 2024-08-26 13:51:51
  • Updated at : 2024-08-26 13:51:51
  • Link: https://redefine.ohevan.com/2024/08/26/1.css/动画(animation)/
  • License: This work is licensed under CC BY-NC-SA 4.0.
On this page
css-动画