<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background: #5CBE3E;
animation-name: fromLeftToRight;/* 取个名字 */
animation-duration: 4s; /* //变化所要的时间 */
animation-iteration-count: infinite;
/* 要循环多小次 */ /* （无数次循环） */
}
/* 定义动画 */
/* 用名字要和（取个名字)一样 */
@keyframes fromLeftToRight {
from { /* 从什么开始 */
margin-left: 0;
}
to { /* 到什么结束 */
margin-left: 100px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background: #5CBE3E;
margin: 5px;
animation-name: fromLeftToRight;/*取个名字 */
animation-duration: 3s;/*多小时间循环一次 */
animation-iteration-count: infinite;
} /* 要循环多小次 */ /*（无限次循环） */
.box:hover {
animation-play-state: paused;
}/* 当鼠标放在图片上时图片不移动 */
.reverse {
animation-direction: reverse;
} /* 从结束到开始地点 */
.alternate {
animation-direction: alternate;
} /*从开始到结束再从结束到开始 */
.alternate-reverse {
animation-direction: alternate-reverse;
}/*从结束到开始再开始到结束 */
@keyframes fromLeftToRight {
from {/* 从什么开始 */
margin-left: 0;
}
to {/* 到什么结束 */
margin-left: 300px;
}
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box reverse"></div>
<div class="box alternate"></div>
<div class="box alternate-reverse"></div>
</body>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img {
opacity: 0;
}
img:hover {
animation: fadeIn 1s ease-in forwards;
} /* hover的变化过程1秒 */
@keyframes fadeIn {
from {/* 从什么 */
opacity: 0;
}
to {/* 到什么 */
opacity: 1;
}
}
</style>
</head>
<body>
<img src="images/1.jpg" alt="一张图片
" width="300" />
</body>
