CSS3에서 키프레임 애니메이션을 생성하려면 개별 키프레임을 정의하십시오. 키프레임은 CSS3의 중간 애니메이션 단계를 제어합니다.
다음은 CSS3에서 키 프레임을 정의하는 코드입니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: colorChange 5s infinite;
}
@keyframes colorChange {
from {
background: red;
left: 0px;
}
to {
background: rgb(32, 229, 255);
left: 300px;
}
}
</style>
</head>
<body>
<h1>Defining keyframes in CSS</h1>
<div></div>
<h2>The above square will change its color and position with time</h2>
</body>
</html> 출력
위의 코드는 다음과 같은 출력을 생성합니다 -
5초 후 위치와 색상이 다음과 같이 변경됩니다. -
