css分享小案例
程序员文章站
2022-05-30 15:06:15
...
简单快速理解动画的使用
秘诀： 先定义后使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画</title>
<style>
/* 先定义动画名称和内容 @keyframe 关键帧*/
@keyframes move {
0%{}
25%{transform: translate(500px,0);}
50%{transform: translate(500px,500px);}
75%{transform: translate(0px,500px);}
}
div{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: pink;
/* 调用已设定好的动画名称 规定时间为5秒 */
animation-name: move ;
animation-duration: 5s;
/*infinite表示动画无限循环播放*/
animation-iteration-count: infinite;
/* alternate表示是否反方向播放 默认是normal */
animation-direction: alternate;
/* delay延迟时间 */
animation-delay: 2s;
}
div:hover{
/* 鼠标放上暂停，需要单写 */
animation-play-state: paused;
}
</style>
</head>
<body>
<div>
盒子
</div>
</body>
</html>