animation-fill-mode
/*
animation-fill-mode:what values are applied
by the animation outside the time it is
executing
*/
INDEX.HTML:
<!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>CSS Tutorial</title>
<link rel="stylesheet" href="styles.css">
</head>
<body >
<div class="animation">animation</div>
</body>
</html>
CSS:
/*
animation-fill-mode:what values are applied
by the animation outside the time it is
executing
*/
div {
width: 200px;
height: 100px;
color: white;
margin:10px;
}
.animation {
background: green;
animation: move 5s 2;
animation-fill-mode: forwards;
}
@keyframes move {
0% {
opacity: 0;
}
25% {
transform: translateX(200px);
opacity: 0.25;
}
50% {
transform: translateX(-100px);
opacity: 1;
}
100% {
transform: translateX(0px);
opacity: 0.5;
}
}
评论
发表评论