animation详解串写

2020-10-28 14:55:48 浏览数 (1)

代码语言:javascript复制
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 50px;
            background-color: red;
            /*animation: move 3s linear 2s 1 normal;*/
            animation: move 3s;
        }
        @keyframes move {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        }
	</style>
</head>
<body>
<!--
1.动画模块连写格式
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;

2.动画模块连写格式的简写
animation:动画名称 动画时长;
-->
<div></div>
</body>
</html>

0 人点赞