<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
/* 2.给元素设置动画 */
/* 2.1设置动画名称 */
animation-name: move;
/* 2.2设置动画持续时长 */
animation-duration: 2s;
/* 2.3设置动画速率 */
animation-timing-function: linear;
/* 2.4设置动画延迟 */
animation-delay: 2s;
/* 2.5设置动画迭代次数 n infinite无数次 默认是1次*/
animation-iteration-count: infinite;
/* 2.6设置动画方向 是否反方向执行 alternate反方向执行*/
animation-direction: alternate;
/* 2.7设置动画执行完毕 停留在哪一帧 默认值backwards第一帧 forwards最后一帧*/
animation-fill-mode: backwards;
/* 简写形式
animation:
动画名称(animation-name)
动画时长(animation-duration)
动画运动速度(animation-timing-function)
延迟时间(animation-delay)
执行次数(animation-iteration-count)
往返动画(animation-direction);
*/
animation: move 2s ease-in-out 0s infinite alternate;
}
div:hover{
/* 悬浮在动画上 暂停动画 paused running*/
animation-play-state: paused;
}
/* 让div动起来 */
/* 1.定义动画关键帧 声明 */
@keyframes move {
/* 开始状态 结束状态 过程状态 */
0%{margin-left: 0;}
25%{margin-left: 150px;}
50%{margin-left: 250px;}
100%{margin-left: 500px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
