通过JavaScript调用CSS动画

最新推荐文章于 2025-02-17 08:00:00 发布

老实先生

最新推荐文章于 2025-02-17 08:00:00 发布

阅读量8.2k

点赞数 9

分类专栏： CSS 文章标签： css js css3 html animation

本文链接：https://blog.youkuaiyun.com/pcbhyy/article/details/106884396

版权

通过JavaScript调用CSS动画

- 案例一：通过按钮开始和停止动画
- 案例二：通过定时器停止动画

案例一：通过按钮开始和停止动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.animation {
    
		    animation: move 2s infinite alternate;
			border:1px solid;
			width:100px;
			height:100px;
			margin-top:50px;
		}
		  
		@keyframes move {
    
		    0% {
    
				transform: rotate(0deg) translate(-100px, 0); ;
		    }
		    100% {
    
				transform: rotate(360deg) translate<