css3动画的基本使用
程序员文章站
2022-03-16 16:41:59
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@keyframes move{
/* 开始状态 */
0%{
transform: translateX(0px);
}
/* 结束状态 */
100%{
transform: translateX(1000px);
}
}
div{
width: 200px;
height: 200px;
background-color: #009DFD;
/* 调用动画 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
推荐阅读