transition ，animation学习

最新推荐文章于 2021-11-17 09:30:54 发布

筱语悠里

最新推荐文章于 2021-11-17 09:30:54 发布

阅读量128

点赞数

分类专栏：前端文章标签： css3 html animation

本文链接：https://blog.csdn.net/sinat_37168842/article/details/108011904

版权

前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

.tra {
				margin: 20px auto;
				width: 100px;
				height: 200px;
				background-color: #99CCFF;
				transition: all 1s;
				color: #AA00FF;
				font-size: 30px;
			}

			/* .tra:hover{
			    transform: translateX(100px);
			} */
			.trans {
				transform: translateX(100px);
			}
			button{
			    border-style: none;
				outline-style: none;
				width: 100px;
				height: 50px;
				background-color: #AAAAFF;
				color: white;
				font-size: 24px;
				border-radius: 5px;
				
			}

			.animation {
				width: 50px;
				height: 100px;
				border-radius: 10px;
				background-color: #FFC0CB;
				animation: gup 10s ease forwards;
				color: white;
				font-size: 18px;
				text-align: center;
			}
			.animation :after{
				width: 50px;
				height: 100px;
				border-radius: 10px;
				background-color: #FFC0CB;
				animation: gup 10s ease forwards;
				color: white;
				font-size: 18px;
				text-align: center;
				content: "";
			}

			@keyframes gup {
				0% {
					obackground-color: #55557f;
					content: "准备ing";
				}
                  
				25% {
					obackground-color: #aaaaff;
					transform:translate(100px,100px);
					content: "我要起飞啦";
				}
				50% {
					background-color: #55aa00;
					transform:translateX(200px);
					content: "飞啊啊啊啊";
				}
				75% {
					background-color: #ffaaff;
					transform:translate(300px, 100px);
					content: "aaa掉了掉了";
				}
				100% {
					background-color: #aa00ff;
					transform:translateX(400px);
					content: "演示失败，再见";
				}
		    }
			 #content span{
			        display: none
			    }
			    #content:after{
			        content: '当月';
			    }
		</style>
	</head>
	<body>
		<div class="tra">是谁的小眼睛看我</div>
		<button style="display:block;margin: 0 auto;"> 点我</button>

		<div class="animation">
			<span> </span>
		</div>
		
		
		<!-- <div id='content'>
		    <span>今天</span>
		</div> -->
	</body>
	<script>
		var btn = document.querySelector("button");
		var le = document.querySelector(".tra");
		btn.onclick = function() {
			le.classList.add('trans')
		}
		btn.onmousemove = function() {
			le.classList.remove('trans')
		}
	</script>

transition使用注意点：

和transform配合使用
需要事件触发

animaition 使用注意点：

使用关键帧：动画执行过程中，物体在某一位置上的特殊状态
关键帧动画：使用连续的关键帧，控制物体连续的状态变化

筱语悠里

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
transition ，animation学习

.tra { margin: 20px auto; width: 100px; height: 200px; background-color: #99CCFF; transition: all 1s; color: #AA00FF; font-size: 30px; } /* .tra:hover{ transform: translateX(100px); } */ .trans { transfor
复制链接

扫一扫

专栏目录