CSS 애니메이션(배경색 및 위치 변경)

2964 단어 csswebdevtutorialbeginners

소개



나는 지금 언젠가 CSS 기본에 대해 배웠고 오늘 배운 것을 공유하기로 결정했습니다. 나는 주로 내가 혼란스러워하는 것들에 대해 블로그를 게시하기로 결정합니다(일종은 내가 더 잘 이해하는 데 도움이 되며 거의 스스로 가르치는 것과 같습니다). 주로 배경색과 위치에 초점을 맞춰 CSS 애니메이션에 대해 논의할 것입니다.

CSS 애니메이션



📌 CSS 애니메이션은 JavaScript를 사용하지 않고 주로 CSS를 사용하지 않고도 웹 페이지에서 움직이는 요소와 '애니메이션'을 만드는 데 도움이 됩니다.
div 요소(컨테이너)를 웹 페이지의 다른 위치로 이동하고 색상을 변경하려면 keyframe라는 것을 사용해야 합니다. 키프레임 규칙 내에 지정된 CSS 스타일을 사용하면 애니메이션이 현재 스타일에서 특정 시간에 새로운 스타일로 점진적으로 변경될 수 있습니다. 화면의 한 지점에서 다른 지점으로 상자를 이동하려는 시나리오가 있다고 가정해 보겠습니다. 상자가 이동하는 동안 지정된 시간에 색상이 변경되기를 원합니다.

상자의 타이밍은 키프레임에서 백분율로 지정해야 합니다(이는 게시물에서 자세히 설명할 수 있음). 이것은 animation-duration 속성이 애니메이션을 완료하는 데 걸리는 시간입니다. animation-duration 속성과 키프레임을 이해하면 요소의 색상을 변경하고 위치도 변경할 수 있습니다. 이해하기 쉽도록 애니메이션 지속 시간을 애니메이션이 지속되는 시간으로 설정하면 됩니다(선호도에 따라 10초, 20초 또는 그 이하일 수 있음). 그리고 키프레임은 상자가 지정된 시간에 색상을 변경하도록 지시하는 속성입니다. (길을 잃으면 가지 마세요. 시범 설명을 할 것입니다)

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: example; /* Standard syntax */
  animation-duration: 4s; /* Standard syntax */
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>


위의 코드 블록을 보면 저기에 '웹킷...'이 있다는 것을 알게 될 것입니다. 표준 CSS 속성 중 일부가 사파리(ios) 브라우저에서 작동하지 않기 때문에 기본적으로 사파리용 코드입니다. 항상 표준 속성과 함께 포함하는 것이 좋습니다.

애니메이션 지속 시간을 4초(초)로 명시했습니다. 그리고 키프레임에는 각 배경색에 정렬된 백분율이 있습니다. 즉, 애니메이션을 실행할 시간이 4초입니다.

4초 이내

📌0%(코드를 실행할 때 기본 색상이 되는 4s 중)에서 배경색은 빨간색이 되고 화면 왼쪽에 표시됩니다(왼쪽이 0px로 설정되어 있기 때문).

📌25%에서 배경색은 노란색으로 변경되고 상자의 왼쪽에 200px를 배치합니다(이렇게 하면 상자가 오른쪽으로 이동함).

📌50%에서는 왼쪽과 위쪽 모두 200px이기 때문에 배경색이 파란색으로 바뀌고 오른쪽으로 아래로 이동합니다.

📌 75%에서 배경색은 녹색으로 바뀌고 왼쪽은 이제 0px이고 위쪽은 200px이기 때문에 왼쪽 아래로 다시 이동합니다.

마지막으로 100%에서는 원래 위치와 색상으로 돌아갑니다. 위의 이 코드 블록은 상자를 네 모서리에서 움직이게 합니다. 키프레임의 중요성은 애니메이션에 추가하려는 스타일을 지정하는 것입니다.

결론



항상 지정해야 하는 한 가지는 애니메이션 지속 시간이 걸리는 시간(초)입니다. 그리고 비율이 좋습니다(키프레임에서). 이는 기본값이 항상 0이므로 애니메이션이 지속되어야 하는 정확한 시간을 지정하지 않으면 아무런 효과가 없기 때문입니다. 읽어 주셔서 감사합니다!
SQL 인젝션 해커 챌린지
신호와 잡음

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage