입문

안녕하세요.이거 프라 이거 이벤트 달력 2일째!!
나는 10월부터 광장에서 보살핌을 받은 숲속이다.
저는 9월까지 간호사로 일했습니다.
매일 일하면서 공부하는 느낌.
이번에는 최근에 가르쳐준 css 애니메이션에 대해 얘기해 봅시다~!
봐주세요

CSS에서만 애니메이션을 만드는 방법은?

애니메이션 하면 JavaScript와 jQuery가 생각납니다.
나는 누군가가 사람들에게 매우 어려운 인상을 주었다고 생각한다.
여기에서 CSS에서 애니메이션을 쉽게 구현하는 방법을 소개합니다.
CSS3에서 애니메이션을 구현하는 방법은 크게 다음 두 가지로 나뉩니다.
•transition 속성에서 정의
·animation 속성에서 정의
【Transition】
・시작과 끝만 지정할 수 있음(시작점에서 끝점까지의 두 점 사이의 애니메이션만 가능)
• 자동 재생 불가, 필요: 호버 등 계기
・ 순환 설정 불가
【Animation】
· 설정 시간 중 시작, 종료 시기와 값의 변화 등을 세밀하게 설정하여 복잡한 애니메이션을 구현할 수 있다
・ 순환 설정 가능
・: 호버 등 계기가 없어도 수행 가능
다시 말하면...
"animation"은 애니메이션의 단계를 상세하게 지정할 수 있으며, 애니메이션이 시작되는 계기도 필요하지 않습니다!
그렇습니다!편해 보여요!!웃다

애니메이션 설정 방법

애니메이션 속성을 사용하면 @keyframes(키프레임)을 사용하여 애니메이션을 설정할 수 있습니다.
즉,
애니메이션 속성을 사용하여 애니메이션을 만들려면 키프레임을 만들어야 합니다.
[키프레임@keyframes]
@keyframes는 CSS의 구문으로, 애니메이션의 시작부터 끝까지 어떤 애니메이션을 할지 지정할 수 있습니다.
@keyframes는 @ 규칙으로 @ 부터 웨이브 괄호 안에 설명됩니다.

@keyframes 任意の名前 {
    0% {
        CSSプロパティ:値;
    }
    100% {
        CSSプロパティ:値;
    }
}

이후 응용 프로그램에서 호출됩니다.
예를 들어, 가로 폭 확대 애니메이션의 경우
페이드 인 애니메이션
애니메이션의 이름을 마음대로 정할 수 있다!!!
0%는 애니메이션을 시작할 때, 100%는 애니메이션이 끝날 때를 나타낸다.
애니메이션을 지정하려면 해당 웨이브 괄호에서 CSS 속성을 설명합니다.
와-간단해!!이렇게 하면 될 것 같아!!웃다
그럼 실제로 해보세요~!!

키 프레임을 사용한 애니메이션 (예시)

[핑크색 공을 하늘하늘하게 띄우기!]
See the Pen @keyframes by kaho ( RwNWMZZ )
on @kaaho .
귀엽다.살짝 꾸며도 좋을 것 같아요.
[주황색 공을 튕기게]

See the Pen CodePen by kaho ( vYENRZZ )
on @kaaho .

농구인가 봐요~
[사각 박스의 색상 회전 변경!]

See the Pen CodePen by kaho ( NWPGyWR )
on @kaaho .

색깔도 삐걱삐걱~
[사각 박스를 각 방향으로 회전]

See the Pen CodePen by kaho ( oNgjqjx )
on @kaaho .

[가운데부터 비욘세]

See the Pen CodePen by kaho ( BayoYjK )
on @kaaho .

비요~

[오른쪽에서 오른쪽까지의 비욘세 비욘세(장호풍으로 나뉜다)]

See the Pen CodePen by kaho ( RwNWQRw )
on @kaaho .

단계마다 색깔이 달라져요~

【마우스로 멈추거나 클릭하여 비욘세를 정지합니다】

See the Pen CodePen by kaho ( eYmpVdM )
on @kaaho .

거추장스러운 건 꺼주세요~
파도처럼.

See the Pen CodePen by kaho ( mdyeXXV )
on @kaaho .

アニメーション関連のプロパティー

애니메이션 속성을 사용하여 애니메이션을 정의할 때 다음 항목을 지정할 수 있습니다p>



속성





애니메이션 이름




애니메이션 시작 시간부터 종료 시간까지




애니메이션 부드럽게(가속도)




애니메이션 시작 전 시간




애니메이션 반복 횟수




애니메이션의 재생성 방향(순서·역재생성)




애니메이션 시작 및 종료 시 스타일 상태




애니메이션 재생/중지

설명 초기 값
animation-name	none
animation-duration	0s
animation-timing-function	ease
animation-delay	0s
animation-iteration-count	1
animation-direction	normal
animation-fill-mode	none
animation-play-state	running
animation	상기 특성을 함께 지정할 수 있는 짧은 손	위의 각 초기 값과 동일

まとめ

CSS만 해도 다양한 애니메이션을 만들 수 있어요!

초와 속도를 바꿔도 조정할 수 있고 운동의 폭도 커진다.

이 CSS 애니메이션에 js를 더하면 더욱 고급 애니메이션을 실현할 수 있다p>

See the Pen CodePen by kaho ( BayoVEd )
on @kaaho .

最後に

내일 필라클레이의 슈퍼 엔지니어 제이 씨가 공개적으로 보도합니다!

기대돼요.p>
이 안에도 엔지니어가 있다!디자이너도!

모집 중p>
CodePen 제외
웨딩미디어プラコレWedding와Dressy 등도 운영하고 있습니다.

꼭 봐주시면 정말 기쁠 것 같아요.p>