[游戏开发] css3 animation 动画从下往上显示，从上往下隐藏

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 游戏开发 -> css3 animation 动画从下往上显示，从上往下隐藏 -> 正文阅读

[游戏开发]css3 animation 动画从下往上显示，从上往下隐藏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title></title>

		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.gradient-wrapper {
				width: 100%;
				display: inline-block;
				background-color: red;
				height: 200px;
				position: absolute;
				bottom: 0;
			}

			.show-animate {
				animation: wrapper-gradient .25s linear;
			}
			@keyframes wrapper-gradient {
				0% {
					transform: translateY(100%);
				}
				100% {
					transform: translateY(0);
				}
			}
			.hide-animate {
				animation: hide-gradient .25s linear;
				animation-fill-mode : forwards; //  动画停留在最后一刻，也就是隐藏
			}
			@keyframes hide-gradient {
				0% {
					transform: translateY(0);
				}
				100% {
					transform: translateY(100%);
				}
			}

		</style>
	</head>
	<body>

		<div class="gradient-wrapper"></div>
		
		<div class="test">显示隐藏</div>
		
		<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function() {
				$('.test').on('click', function() {
					if ($('.gradient-wrapper').hasClass('show-animate')) {
						$('.gradient-wrapper').removeClass('show-animate').addClass('hide-animate');
					} else {
						$('.gradient-wrapper').removeClass('hide-animate').addClass('show-animate');
					}
				})
			});
		</script>
	</body>
</html>