9.1、@keyframes关键帧

￡神魔★判官ぃ 2022-04-05 04:22 355阅读 0赞

@keyframes定了一个动画，可以由多个帧组成。例如

@keyframes my_name{
    	0%{
    		transform: translateY(-100px);
    	}
    	50%{
    		transform: translateY(-50px);
    	}
    	100%{
    		transform: translateY(100px);
    	}
    }

可知my\_name动画由两帧组成，第一帧从0%到50%，第二帧从50%到100%，0%、50%、100%指的是animation-duration的时间比例。比如animation-duration：2s，则前1s内，从transform: translateY(-100px)运动到transform: translateY(-50px);处；在后1s内，从transform: translateY(-50px)运动到transform: translateY(100px)。

示例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			#wrap{
    				position: absolute;
    				left: 0;
    				right: 0;
    				top: 0;
    				bottom: 0;
    				margin: auto;
    				width: 300px;
    				height: 300px;
    				border: 1px solid;
    			}
    			
    			#wrap > .box{
    				position: absolute;
    				left: 0;
    				right: 0;
    				top: 0;
    				bottom: 0;
    				margin: auto;
    				width: 100px;
    				height: 100px;
    				border: 1px solid;
    				background: pink;
    				border-radius: 50%;
    				/*动画*/
    				animation-name: my_name;
    				animation-duration: 3s;
    				animation-iteration-count: 2;
    				animation-direction: alternate;
    				animation-fill-mode: both;
    			}
    			
    			@keyframes my_name{
    				0%{
    					transform: translateY(-100px);
    				}
    				50%{
    					transform: translateY(-50px);
    				}
    				100%{
    					transform: translateY(100px);
    				}
    			}
    
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div class="box">
    				
    			</div>
    		</div>
    	</body>
    </html>

当动画开始时，小球在第1s内由-100px运动到-50px，在第2s内由-50px运动到100px处。由于animation-iteration-count：2，表示帧要重复两次，是对my\_name中的所有帧都重复两次，所以，在第3s内再由100px处运动到-50px处，最后，由-50px处运动到-100px处，结束动画。