Transition ANIMATION 0 1% 2% ..... 100%
/*
Transition 0 = 100%
ANIMATION 0 1% 2% ..... 100%
*/
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="transition">transition</div>
<div class="animation">animation</div>
</body>
</html>
CSS:
/*
Transition 0 = 100%
ANIMATION 0 1% 2% ..... 100%
*/
div {
width: 200px;
height: 100px;
color: white;
margin:10px;
}
.transition {
background: red;
transition: all 2s linear;
}
.transition:hover {
background: yellowgreen;
transform: translate(100px);
}
.animation {
background: green;
/* animation-name: move;
animation-duration: 10s;
animation-iteration-count: 3; */
animation: move 5s infinite;
animation-iteration-count: 2;
}
@keyframes move {
0% {
transform: translatex(20px);
}
25% {
transform: translatex(100px);
background: blue;
}
50% {
transform: translatex(50px);
background: red;
}
75% {
transform:translatex(-200px);
background: yellow;
}
100% {
transform:translateX(20px);
background: purple;
}
}
评论
发表评论