css动画

<style> /* 定义名称为zhuan的动画 */ @keyframes zhuan { 0% { transform: translate(0, 0); } /* 水平移动 */ 30% { transform: translate(600px, 0); } /* 放大x，y 2倍*/ 50% { transform: scale(2, 2); } /* 旋转45度 */ 70% { transform: rotate(180deg); /* 设置旋转中心为y轴中点 */ transform-origin: 0 50%; } 100% { transform: translate(1500px, 800px); } } div { width: 300px; height: 300px; background-color: aqua; animation: zhuan; /* 动画持续时间 */ animation-duration: 10s; } </style>

动画属性

div { width: 300px; height: 300px; background-color: aqua; animation-name: zhuan; /* 动画持续时间 */ animation-duration: 10s; /* 动画style */ animation-timing-function: ease-in; /* 延迟触发 */ animation-delay: 2s; /* 设置动画原路返回 */ animation-direction: alternate; /* 设置动画次数为无限次 */ animation-iteration-count: infinite; /* 设置动画不会返回 */ animation-fill-mode: forwards; } div:hover { /* 动画暂停 */ animation-play-state: paused; }

css动画