index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>CSS3动画效果</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>我是HTML5</div>
</body>
</html>
style.css
@charset "utf-8";
body {
margin: 100px;
}
div {
width: 200px;
height: 200px;
background-color: white;
border: 1px solid green;
/* animation-name: myani;
animation-duration: 1s;
animation-timing-function: ease;*/
/*animation-delay: 1s;*/
/*animation-iteration-count: infinite;*/
/*animation-iteration-count: 4;*/
/*animation-direction: alternate;*/
/*animation-play-state: paused;*/
/*animation-fill-mode: forwards;*/
/*animation-fill-mode: backforwards;*/
/*animation-iteration-count: 3;
animation-direction: alternate;
animation-fill-mode: both;*/
animation: myani 1s ease 2 alternate 1s both;
}
@keyframes myani {
/* 0%, 100% {
background-color: white;
margin-left: 0px;
}
50% {
background-color: black;
margin-left: 100px;
}*/
form {
background-color: white;
margin-left: 0px;
}
to {
background-color: black;
margin-left: 100px;
}
}