css3动画实现一个从下往上的弹框

css3动画实现一个从下往上的弹框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.pop{
				width: 300px;
				height: 200px;
				border: 1px solid #000000;
				border-radius: 5px;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				background-color: #FFFFFF;
				display: none;
				bottom: 0;
			}
			@keyframes frame{
				from{
					top: 100%;
				}
				to{
					top: 50%;
				}
			}
			.show{
				display: block;
				animation: frame 2s linear;
				animation-fill-mode: forwards;
			}
		</style>
		<script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
	</head>
	<body>
		<button class="btn">打开</button>
		<div class="kuang">
			<div class="pop">
				文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
			</div>
		</div>
		<script type="text/javascript">
			$('.btn').click(function(){
				$('.pop').addClass('show');
			})
		</script>
	</body>
</html>

transition与animation的区别

  1. transition是设置属性的变化,animation是通过keyframe进行动画;
  2. transition是过渡动画,只有开始和结束,animation有开始结束和中间的动画

问题:请使用css3动画实现一个从下往上的弹框
知识点:css动画、定位、transform

你可能感兴趣的:(前端,css3)